Question

我在过去创建了无数的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);
  });

Answer 1

在$('nav li ul').hide();

中执行nav ul li ul {display:none;}

此外，您错过了该jQuery选择器中的'ul'标记。

适合我：http://jsfiddle.net/4kqRv/

您实际上可以在CSS中进行下拉菜单。

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

不会那么好，但有效：http://jsfiddle.net/WRGJS/

制作下拉菜单保持隐身状态，直到将鼠标悬停在上方

1 个答案: