我设计了一个漂亮的菜单，需要帮助添加功能。我的问题是，当我将鼠标悬停在子菜单上时，我希望收集悬停状态保持不变。
HTML
<div class="navi">
<ul class="menu">
<li><a href="#" title="Women">Women</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Junior</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Collections</a>
<ul class='children'>
<li><a href="#" style="background-image: none; font-weight: bold;">Year</a>
</li>
<li><a href="#">2014</a> <span class="nav-arrow">▸</span>
<ul class='children'>
<li><a href="#" style="background-image: none;">SUMMER</a></li>
<li><a href="#" style="background-image: none;">AUTUMN</a></li>
<li><a href="#" style="background-image: none;">WINTER</a></li>
<li><a href="#" style="background-image: none;">SPRING</a></li>
</ul>
</li>
<li><a href="">2013</a><span class="nav-arrow">▸</span>
<ul class='children'>
<li><a href="#" style="background-image: none;">SUMMER</a></li>
<li><a href="#" style="background-image: none;">AUTUMN</a></li>
<li><a href="#" style="background-image: none;">WINTER</a></li>
<li><a href="#" style="background-image: none;">SPRING</a></li>
</ul>
</li>
<li><a href="">2012</a><span class="nav-arrow">▸</span>
<ul class='children'>
<li><a href="#" style="background-image: none;">SUMMER</a></li>
<li><a href="#" style="background-image: none;">AUTUMN</a></li>
<li><a href="#" style="background-image: none;">WINTER</a></li>
<li><a href="#" style="background-image: none;">SPRING</a></li>
</ul>
</li>
<li><a href="">2011</a> <span class="nav-arrow">▸</span>
<ul class='children'>
<li><a href="#" style="background-image: none;">SUMMER</a></li>
<li><a href="#" style="background-image: none;">AUTUMN</a></li>
<li><a href="#" style="background-image: none;">WINTER</a></li>
<li><a href="#" style="background-image: none;">SPRING</a></li>
</ul>
</li>
</ul>
</li>
<li class="sale"><a href="#">Sale</a></li>
<li class="last"><a href='#'>MY ACCOUNT</a></li>
</ul>
<br style="clear: both;" />
</div>
</div>
CSS
.navi {
width:100%;
border-bottom:5px solid #000;
height:50px;
margin-bottom:10px;
padding:0;
}
.menu {
width:100%;
padding:0;
margin:0;
}
.menu, .menu ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
font-family:Open Sans;
border: 0 none;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
z-index: 5;
text-transform:uppercase;
font-family:Open Sans;
font-weight:bold;
}
.menu li a{
font-size:14px;}
.menu li:hover {
white-space: normal;
z-index: 100;
}
.menu li li {
float: none;
}
.menu ul {
left: 0;
position: absolute;
top: 0;
visibility: hidden;
z-index: 10;
}
.menu li:hover > ul {
top: 100%;
visibility: visible;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu:after, .menu ul:after {
clear: both;
content: ".";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.menu, .menu ul {
min-height: 0;
}
.menu ul {
margin: -10px 0 0 -30px;
padding: 10px 30px 30px;
}
.menu ul ul {
margin: -30px 0 0 -10px;
padding: 30px 30px 30px 10px;
}
.menu ul li a:hover, .menu li li a:hover {
color: #484848;
text-decoration: none;
}
.menu ul {
min-width: 15em;
width: auto;
}
.menu a.arrow {
background: url(img/arrow.gif) no-repeat right center;
}
.menu ul a.arrow {
background: url(img/right.gif) no-repeat 97% center;
}
.menu .menuRight {
float: right;
margin-right: 0px;
}
.menu a {
font-family:Open Sans;
color: #314350;
display: block;
height:50px;
line-height:50px;
margin: 0 0px 0 0;
padding: 0 1em;
position: relative;
text-decoration: none;
font-size:18px;
}
.menu a:hover {
background-color: #1c2b36;
color: #ffffff;
box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
}
.menu .current_page_item a {
background-color:#1c2b36;
color: #ffffff;
box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
}
.menu li li {
background:#DFDFDF;
color: #000;
filter: none;
width: auto;
}
.menu li li a {
background-position: 50% 50%;
background-repeat: no-repeat;
color: #000;
font-size: 14px;
font-weight: 400;
height: 40px;
line-height: 40px;
padding: 5px 10px;
text-shadow: none;
white-space: nowrap;
width: auto;
}
.menu li li a:hover {
background:#E5E4E4;
box-shadow:none;
}
.menu ul > li + li {
border-top: 0 none;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu > li:first-child > a {
border-left: medium none;
}
.menu > li:first-child > a, .menu li + li + li li:first-child > a {
}
.menu ul.children a, .menu .current_page_ancestor, .menu .current_page_ancestor ul a {
background: none;
filter: none;
}
.menu ul.children a{background:url(images/arrow.png) no-repeat 93% 70%;}
.menu ul.children a:hover{background:url(images/arrow.png) no-repeat 93% 70% #999;}
ul.sub-menu .current_page_item a {
background:none;
}
.nav-arrow {
position:absolute;
top:8px;
right: 4px;
}
li.last {
float:right;
padding-left:60px;
}
li.sale a {
color:#F05050;
}
答案 0 :(得分：0)
您只需要使用CSS稍微改变一下您的元素。
目前，您正在通过定位每个菜单 anchor 悬停状态来装饰菜单，如下所示：
.menu a:hover {
/* menu item styles here */
}
因此，当用户将鼠标悬停在父链接上时，要访问菜单项，他们会立即将鼠标移出。您需要将:hover状态应用于包含整个菜单项和其子项的父元素。在这种情况下，.menu li。
因此，我们不会影响所有子元素（即其中的嵌套列表），您可以target direct children使用选择器>
.menu > li:hover > a {
/* menu styles here*/
}
此处它再次定位主菜单项中的嵌套列表项：
.menu ul.children > li:hover > a {
/* nested menu item styles */
}
或者，您可以定位相同的项目：
.menu li > ul > li:hover > a
答案 1 :(得分：-1)
解决方案非常简单。每当你有一个：悬停用li替换它：hover＆gt;一个。它需要这种方式的原因是因为无论何时将鼠标悬停在嵌套列表项上，您都会自动将鼠标悬停在其列表项祖先上，这将自动使祖先也悬停，从而在其上调用：悬停状态。
顺便说一下，在我的书“功能性CSS”中，我仍然可以在亚马逊上免费获得，我构建了一个复杂的导航菜单，根据浏览器空间的不同而显示。您的菜单看起来不错，但有些元素仍需要调整。
这是小提琴：http://jsfiddle.net/aQ9h5/
replace a:hover with li:hover > a