CSS Drop-Down Menu with "Click to Open"

Posted on 2009-04-25
Last Modified: 2013-11-19
Does anyone have any examples of a CSS Drop Menu (or javascript if necessary) that uses "click to open"? I basically want a drop down that behaves like a combobox. The problem is, my drop down menu is fancy and I don't see any easy way to reskin a combobox to do what i'm attempting. Please see "Example.jpg" attached for clarification. The closest i could find to what i need is here:

The main difference is that this works on a hover and not a click to open. Also it does not remain expanded until you click away (i.e.: just like a combobox). If I could at least get the hover and 'click to open' part to work right that would help alot. Any ideas on how to best accomplish this behavior would be greatly appreciated.
Question by:VirtualLNK
    LVL 4

    Expert Comment

    This one has worked well for me. Let me know what you think. (Remove ".txt" - this is an HTML file.)

    Author Comment

    Thanks for this, although it's not quite what I need. I need the hyperlink to maintain it's hover style while the menu is expanded (see Example.jpg) and to go away when I click away from it.
    LVL 4

    Accepted Solution

    How good are you with Javascript? I found a good script that I'm thinking you could modify - replacing the onmouseover to onclick (to open the menu); and replacing the onmouseout with an onblur function (to close the menu when another top-level item is clicked).

    Here's the menu script:

    And here's some help with the onblur function:

    JS is not my strong suit or I'd try to hack it together for you...but I think all the pieces are there. :)

    Author Comment

    It took some work, but I was able edit the second example to achieve what i needed. Thanks for your help slovisa.

    Author Closing Comment

    Thanks for your help!

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now