Question

您好我有一个基本菜单，我想添加一个子菜单，只有在某个菜单链接悬停时才会显示。当链接没有悬停时，我尝试的所有内容都不会隐藏子菜单。这是我的代码：

CSS

.navmenu{
float:right;
  font-size: 13px;
  font-weight:400;
  text-transform: uppercase;
}

.navmenu li{
  position: relative;
  display: inline-block;
  float: left;
}

.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}

.navmenu li a:hover{
background:#36332e;
}

.active  a{
background:#36332e;
}

HTML

<ul class="navmenu">
<li class="active"><a href="index.html">Home</a></li> 
<li><a href="#">About Us</a>
    <ul>
        <li><a href="#">Sub Link 1</a></li>
        <li><a href="#">SubLink 2</a></li>
    </ul>
</li> 
<li><a href="#">Testimonials</a></li> 
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li> 
</ul>

Answer 1

您需要先隐藏菜单：

.navmenu li ul { display: none; }

然后将鼠标悬停在导航项上时显示：

.navmenu li:hover ul { display: none; }

您还应该注意定义定位.navmenu li或.navmenu li a的样式，因为这些样式也会定位到您的子菜单。您应该使用child selectors，让您更好地控制非子菜单链接，因此您的选择器将如下所示：

.navmenu > li
.navmenu > li > a

我已经将这些变化中的一些变成了这个JSFiddle，以帮助你入门：

http://jsfiddle.net/Wexcode/B5P26/

编辑：

当您将鼠标悬停在子菜单链接上时，这实际上会失去悬停状态：

.navmenu > li > a:hover {
  background:#36332e;
}

相反，你应该这样做：

.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }

由于<ul>嵌套在<li>元素中，因此当您将鼠标悬停在子菜单链接上时，不会丢失悬停状态。我更新了小提琴以反映这些变化。

Answer 2

<ul class="navmenu">
<li class="active"><a href="index.html">Home</a></li> 
<li><a href="#">About Us</a>
    <ul>
        <li>
         <a href="#">Sub Link 1</a>

         <ul>
          </li> <a href=# >hi hi hi</a>
           <ul>
            <li>hello hello hello</li>
            <li>hello hello hello</li>
            <li>hello hello hello</li>
           </ul>
          </li>
          </li><a href=# >hi hi hi</a> </li>
          </li> <a href=# >hi hi hi</a> </li>
         </ul>

         </li>

        <li><a href="#">SubLink 2</a></li>
    </ul>
</li> 
<li><a href="#">Testimonials</a></li> 
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li> 
</ul>

将子菜单添加到现有菜单

2 个答案: