Question

我有以下菜单结构：

<li id="nav-menu-item-226" class="menu-item-has-children">
    <a href="http://sample.com/226" class="menu-link main-menu-link">About Us</a>
    <ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
        <li class="sub-menu-item"><a href="...">...</li>
        <li class="sub-menu-item"><a href="...">...</li>
    </ul>
</li>

无序列表默认为display: none。

我需要做的是，每当用户将鼠标悬停在父页面链接上时，子菜单就会下拉。

在最好的情况下，我只需要用css完成它。我尝试了很多不同的片段，但没有一个帮助过。

Answer 1

将id提供给ul标签并将其样式显示为：none。

然后，在你的CSS中

#id ul li：hover＆gt; ul { display:block }

Answer 2

我就是这样做的：

.sub-menu {
    display:none;
}
.menu-item-has-children:hover > .sub-menu {
    display:block;
}

Here is the JSFiddle demo

Answer 3

你也可以使用jQuery来获得一个很好的slideDown / slideUp效果。

jQuery的：

;(function($){
  $("#menu li:has(ul)").hover(function(){
    $(this).find("ul").not(":animated").slideDown();
  }, function(){
    $(this).find("ul").not(":animated").slideUp();
  });
})(jQuery);

CSS

#menu .sub-menu {
  display: none;
}

HTML

<ul id="menu">
  <li id="nav-menu-item-221" class="menu-item-has-children">
    <a href="http://sample.com/226" class="menu-link main-menu-link">Home</a>
  <li id="nav-menu-item-226" class="menu-item-has-children">
    <a href="http://sample.com/226" class="menu-link main-menu-link">About Us</a>
    <ul class="sub-menu dropdown-menu menu-odd menu-depth-2">
        <li class="sub-menu-item"><a href="...">...</li>
        <li class="sub-menu-item"><a href="...">...</li>
    </ul>
  </li>
  <li id="nav-menu-item-233" class="menu-item-has-children">
    <a href="http://sample.com/226" class="menu-link main-menu-link">Third</a>
  </li>
</ul>

工作JSfiddle

Answer 4

您真正需要做的就是将<ul>嵌套在<li>元素中。

<nav>
    <ul>
        <li><a href="#">Link</a></li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

这里有一些可以帮助您入门的CSS：

* Resets */
nav a { 
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
    list-style: none;
    margin: 0;
    padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
    float: left;
    position: relative; }
nav > ul > li > a { 
    padding: 10px 30px;
    border-left: 1px solid #000;
    display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
    position: absolute;
    background: #ccc;
    width: 100%; 
    margin: 0;
    padding: 0;
    display: none; }
nav ul li ul li { 
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }

预览Demo

在悬停时显示li子项

4 个答案: