所有下拉菜单都出现在悬停时答案

【问题标题】：All drop down menus appear on hover所有下拉菜单都出现在悬停时
【发布时间】：2014-08-13 14:35:31
【问题描述】：

我正在制作一个导航栏，当我将鼠标悬停在链接上时会出现一个下拉菜单。当鼠标悬停在下拉菜单中时，我希望另一个菜单出现在链接的一侧。我使用<ul> 和<li> 来实现这一点。我的问题是当我将鼠标悬停在第一个链接上时，所有下拉菜单都出现了。

这是我的代码

<style type="text/css">
<!--
#NavBar {
margin:0;
padding:0;
position:absolute;
left: 31px;
top: 143px;
width: 1374px;
z-index:1000;
}
#NavBar ul {
margin:0;
padding:0;
line-height:50px;
}
#NavBar li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#0099FF;
}
#NavBar ul li a {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
height:50px;
width:250px;
display:block;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#NavBar ul ul {
position:absolute;
visibility:hidden;
top:50px;
}
#NavBar ul li:hover ul {
visibility:visible;

}
#NavBar ul ul ul {
position:absolute;
visibility:hidden;
left:252px;
}
#NavBar ul ul li:hover ul ul{
visibility:visible;

}
#NavBar li:hover {
background:#FF0000;
}
#NavBar ul li:hover ul li a:hover {
background:#CCC;
colour:000;
}
#NavBar a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
-->
</style>
</head>

<body>
<div id="NavBar">
<ul>
<li><a href="#"><strong>Link1</strong></a>
    <ul>
        <li><a href="#">DropDown1</a>
            <ul>
                <li><a href="#">DropDown1</a></li>
                <li><a href="#">DropDown2</a></li>
            </ul>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link2</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link3</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link4</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link5</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
</ul>

<br class="clearFloat" />
</div>

我还创建了一个 jsfidle 来尝试解决我的问题 http://jsfiddle.net/BHP84/

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

使用li:hover > ul 指代每个li 的“第一级”ul

#NavBar ul li:hover > ul {
    visibility:visible;
}

小提琴：

http://jsfiddle.net/82W5Y/

【讨论】：

【解决方案2】：

我建议这里是一个变种 HTML

 <div id="mainmenu">
    <ul>
    <!-- Пункт меню 1 -->
    <li><a href="#">Пункт 1</a>
         <ul>
           <li><a href="#">подпункт 1.1</a></li>
           <li><a href="#">подпункт 1.2</a>         
             <ul>
                <li><a href="#"> подпункт 1.2.1 </a>            
                    <ul>
                      <li><a href="#"> подпункт 1.2.1.1 </a></li>
                      <li><a href="#"> подпункт 1.2.1.2</a>                  
                           <ul>

这段代码是 demo 工作的示例

【讨论】：

这是一个很棒的导航栏！谢谢你

【解决方案3】：

我建议在这里对您的 css 进行轻微修改。

<head>
<style>
#NavBar {
margin:0;
padding:0;
position:absolute;
left: 31px;
top: 143px;
width: 1374px;
z-index:1000;
}
#NavBar ul {
margin:0;
padding:0;
line-height:50px;
}
#NavBar li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#0099FF;
}
#NavBar ul li a {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
height:50px;
width:250px;
display:block;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#NavBar ul ul {
position:absolute;
visibility:hidden;
top:50px;
}
#NavBar ul li:hover ul {
visibility:visible;

}
#NavBar ul li ul li ul li{
position:relative;
visibility:hidden;
left:252px;
top:-50px;
}
#NavBar ul li ul li:hover ul li{
visibility:visible;

}
#NavBar li:hover {
background:#FF0000;
}
#NavBar ul li:hover ul li a:hover {
background:#CCC;
colour:000;
}
#NavBar a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}

</style>
</head>
    <body>
<div id ="NavBar">
<ul>
<li><a href="#"><strong>Link1</strong></a>
    <ul>
        <li><a href="#">DropDown1</a>
            <ul>
                <li><a href="#">DropDown11</a></li>
                <li><a href="#">DropDown12</a></li>
            </ul>
        </li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a>
            <ul>
                <li><a href="#">DropDown31</a></li>
                <li><a href="#">DropDown32</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#"><strong>Link2</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a>
            <ul>
                <li><a href="#">DropDown21</a></li>
                <li><a href="#">DropDown22</a></li>
            </ul>
        </li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link3</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link4</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
<li><a href="#"><strong>Link5</strong></a>
    <ul>
        <li><a href="#">DropDown1</a></li>
        <li><a href="#">DropDown2</a></li>
        <li><a href="#">DropDown3</a></li>
    </ul>
</li>
</ul>
  <br class="clearFloat" />
</div> </body>

小提琴：- http://jsfiddle.net/Vhs2v/59/

【讨论】：