3

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 Nov 14 '12 at 15:36
  • By the way, line 7 and 8 in your CSS code are identical and therefore redundant. – danijar Nov 14 '12 at 15:40

1 Answers1

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; }
Community
  • 1
  • 1
John
  • 180
  • 11
  • I want to close the menu when I click any places out of the menu. –  Nov 14 '12 at 15:51
  • Thank you very much John. I tried this in this fiddle http://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! –  Nov 14 '12 at 16:08
  • Also it seems when click the submenu, and mouse hover to another one the subsubmenus are overlapped. –  Nov 14 '12 at 16:11
  • I fixed overlap part, hover out bug seems depend on css, hold on I will try to figure it out – John Nov 14 '12 at 16:20
  • Hi John, Could you tell me how to close the menu after I click third layer menu item? I use $(".dropdown ul").css({ "visibility":"hidden" }); when capture click event but not working. –  Nov 14 '12 at 22:28
  • @Sop, you want to close third layer when again clicking on second layer ? – John Nov 14 '12 at 23:16
  • I want to close the whole menu after click third layer. Thanks! –  Nov 15 '12 at 14:49
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19622/discussion-between-sop-and-john) –  Nov 16 '12 at 07:45