1

过去我创建了无数的 jQuery 下拉菜单，大部分时间都涉及到一些尝试和错误，但这次无论我如何更改菜单的内容都保持可见。任何帮助将不胜感激。

这是我的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;}

和 jQuery：

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

1 回答 1

1

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/

于 2013-03-15T15:23:41.123 回答