Question

我正在制作导航栏，当我将鼠标悬停在链接上时，会出现一个下拉菜单。当它悬停在下拉菜单中时，我希望另一个菜单显示在链接的侧面。我使用<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/

Answer 1

使用li:hover > ul来引用“第一级”＆＃39;每个ul

的li

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

小提琴：

http://jsfiddle.net/82W5Y/

Answer 2

我建议这里有一个变种的 HTML

<div id="mainmenu"> <ul>  <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
的一个例子

Answer 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/

所有下拉菜单都会在悬停时显示

3 个答案: