我有一个带有子菜单的CSS下拉菜单。我的问题是在我点击之前子菜单关闭了。当我将光标移动到子菜单的中途时，它会消失。例如，当我移动鼠标点击“Item 3 sub 1.1”时，它会消失。
主下拉菜单工作正常，但子菜单是问题所在。
在点击它之前，我该怎么做才能使子菜单保持不变？...感谢您的帮助
这是菜单的CSS：
.nav {
padding: 0px;
text-align: center;
border: 0px;
vertical-align: middle;
display: table-row;
width: 100%;
margin: 0px auto;
background-color:#660000;
overflow: hidden;
position:relative;
height: 30;
text-align: center;
margin: 0px auto 0px auto;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
float:left;
display:inline;
}
ul li {
display:block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin:0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left:1px solid #660000;
border-right:1px solid #660000;
}
ul li a:hover {
background: #3300cc;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 100;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
display: block;
}
li li ul a {
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
}
这是html：
<div class="nav" >
<ul class="drop-nav">
<li><a href="item1.html">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="item2_1.html">Item 2 sub 1</a></li>
<li><a href=" item2_2.html"> Item 2 sub 2</a></li>
<li ><a href=" item2_3.html"> Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#"> Item 3</a>
<ul>
<li><a href="#"> Item 3 sub 1 »</a>
<ul>
<li><a href=" item3_1_1.html"> Item 3 sub 1.1</a></li>
<li><a href=" item3_1_2.html"> Item 3 sub 1.2</a></li>
<li ><a href=" item3_1_3.html"> Item 3 sub 1.3</a></li>
</ul>
</li>
<li><a href="#"> Item 3 sub 2 »</a>
<ul>
<li><a href=" item3_2_1.html"> Item 3 sub 2.1 </a></li>
<li><a href=" item3_2_2.html"> Item 3 sub 2.2 </a></li>
<li><a href=" item3_2_3.html"> Item 3 sub 2.3 </a></li>
</ul>
</li>
<li><a href=" item3_3.html"> Item 3 sub 3 </a></li>
<li><a href=" item3_4.html"> Item 3 sub 4 </a></li>
<li><a href=" item3_5.html"> Item 3 sub 5 </a></li>
</ul>
</li>
</ul>
</div>
答案 0 :(得分：1)
你的css选择器非常令人困惑。在下一行中仅使用 ul li 然后 li ul 或 li li ul a 太模糊，并且没有真正针对元素。虽然这种方法可能适用于深层嵌套，但当您开始嵌套2层深度时，它会严重混淆（对于浏览器而言）。
我给每个UL元素一个特定的描述性类，你可以准确地定位它。
另外，请使用您的UL的位置属性，并且在菜单重叠时不要忘记考虑z-index。
像这样的东西，不是很漂亮，但它的运作方式与你预期的一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#"> Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>