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

Answer 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; }