How to make CSS dropdown menu on click to dropdown

Question

How to make the following css dropdown menu only accept click to dropdown? For example, now when mouse hover "Please Select". The second layer appears. I want to change to when click "Please Select", the second layer appears. Also the click event should apply to second layer menu.

This is a Fiddle

I'm using jquery but don't know how to do this.

The html codes

 <ul class="dropdown">
        <li><a href="#">Please select</a>
            <ul class="sub_menu">
                 <li>
                     <a href="#">Artificial Turf</a>
                     <ul>
                        <li><a href="#">Indoor</a></li>
                        <li><a href="#">Outdoor</a></li>
                    </ul>                    
                </li>
                 <li>
                    <a href="#">Batting Cages</a>
                    <ul>
                        <li><a href="#">Indoor</a></li>
                        <li><a href="#">Outdoor</a></li>
                    </ul>
                 </li>
            </ul>
        </li>
    </ul

The CSS code

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover                    { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
                                       color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
    LEVEL TWO
*/
ul.dropdown ul                         { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                     { font-weight: normal; background: #f6f6f6; color: #000; 
                                      border-bottom: 1px solid #ccc; float: none; }

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                    { border-right: none; width: 100%; display: inline-block; } 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul                     { left: 100%; top: 0; }
ul.dropdown li:hover > ul             { visibility: visible; }

I am curious for a CSS solution without using Javascript. Maybe it could be done with the pseudo selectors :active or :focus. — danijar
– danijar, Commented Nov 14, 2012 at 15:36
By the way, line 7 and 8 in your CSS code are identical and therefore redundant. — danijar
– danijar, Commented Nov 14, 2012 at 15:40

Community · Accepted Answer · 2017-05-23 12:18:43Z

1

As I noticed in your css you use visibility to show or hide ul-s, so you should use this code

   $(".dropdown li").click(function() { 
        $(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" });
        $(this).children("ul").css({ "visibility":"visible" });
    })

and you should also remove this line from your css

ul.dropdown li:hover > ul { visibility: visible; }

to close tabs use this code

$('html').click(function() {
   $(".dropdown ul").css({ "visibility":"hidden" });
 });

 $('.dropdown ').click(function(event){
     event.stopPropagation();
 });

last part taken from this stackoverflow question How to detect a click outside an element?

also to fix position change in case of hover out change 2 line in your css to this

ul.dropdown li  { font-weight: bold; float: left; zoom: 1; background: #ccc; position: relative; }

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 14, 2012 at 15:21

John

1901 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user503853 Over a year ago

I want to close the menu when I click any places out of the menu.

user503853 Over a year ago

Thank you very much John. I tried this in this fiddle jsfiddle.net/donli/panzd/3 . When mouse hover out of the menu, the "Please Select" disappeared. When click any place out of the menu, it appeared again. Please advice!

user503853 Over a year ago

Also it seems when click the submenu, and mouse hover to another one the subsubmenus are overlapped.

John Over a year ago

I fixed overlap part, hover out bug seems depend on css, hold on I will try to figure it out

user503853 Over a year ago

Hi John, Could you tell me how to close the menu after I click third layer menu item? I use <code>$(".dropdown ul").css({ "visibility":"hidden" });</code> when capture click event but not working.

|

Collectives™ on Stack Overflow

How to make CSS dropdown menu on click to dropdown

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related