CODEWITHSUNDEEP
jqueryhtmlcss
Chris Brennan
Chris Brennan

Reputation: 59

Making a drop down menu stay invisible until hover over

I have created countless jQuery drop down menu's in the past, most of the time there is a wee bit of trial and error involved but this time no matter what I change the contents of the menu stay visible. Any help would be greatly appreciated.

Here is my html:

   <nav>
        <ul>
            <li>Content Management (CMS)
                <ul>
                    <li><a class="a1" href="#">Catalog</a></li>
                    <li><a class="a1" href="#">Images</a></li>
                </ul>
            </li>
            <li>Developer
                <ul>
                    <li><a class="a1" href="#">Pages</a></li>
                    <li><a class="a1" href="#">Static Blocks</a></li>
                </ul>
            </li>
            <li>Tools
                <ul>
                    <li><a class="a1" href="#">Analytics <i>BETA</i></a></li>
                </ul>
            </li>
        </ul>
    </nav>

CSS:

nav {position:absolute; margin-top:-20px;}
nav ul{text-align:left; list-style-type:none; }
nav ul li {float:left; background:#FFF; width:250px;}
nav ul li:hover {background:#FFF; border:2px solid #b1953a;}
nav ul li a {display:block; width:200px; font-size:14px;}
nav ul li ul {position:absolute; width:50px; padding:2px;}
nav ul li ul li{background:#FFF; border-left:2px solid #ccc; padding:5px;}

And jQuery:

 $('nav li ul').hide();
 $('nav li').hover(
  function () {
   $('ul', this).stop().slideDown(100);
  },function () {
   $('ul', this).stop().slideUp(100);
  });

Upvotes: 1

Views: 1336

Answers (1)

shanehoban
shanehoban

Reputation: 870

Do $('nav li ul').hide(); in CSS nav ul li ul {display:none;}

Also, you had missed a 'ul' tag in that jQuery selector.

Works for me: http://jsfiddle.net/4kqRv/

You can actually do the dropdown in CSS really.

nav ul li:hover ul {display:block;}

Won't be as nice, but works: http://jsfiddle.net/WRGJS/

Upvotes: 1

Related Questions