我从包含嵌套列表的菜单中得到了一些丑陋的行为。
父菜单有一些广泛的类别。当用户将鼠标悬停在这些列表项之一上时，下面会出现一个子菜单。这可以。
但是，子项也可以有子菜单（我将这些称为孙子菜单）。这些也会出现在悬停时，但是当用户不再悬停在孙子上时，整个子菜单就会消失。
这最好用FIDDLE来解释
- 将鼠标悬停在 Parent 上会显示 3 个孩子。这很好。
- 将鼠标悬停在 Child 1 上会显示孙子。这也很好。
- 但是现在一旦展开子 1 下的孙子，尝试单击子 2 或子 3 就会变得笨拙。这真是太糟了。
如果没有这种愚蠢的行为，如何在这里实现体面的悬停效果？（最好使用 CSS 解决方案。）
HTML
<div id="centeredmenu">
<ul>
<li>
<p><a href="#"><span>Parent</span></a></p>
<ul>
<li>
<a href="#">Child 1 </a>
<ul>
<li><a href="#">grandchild 1</a></li>
<li><a href="#">grandchild 2</a></li>
<li><a href="#">grandchild 3</a></li>
</ul>
</li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul>
</li>
</ul>
</p>
CSS
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 0px;
padding:3px 10px;
background: rgb(240,240,240);
color:#333333;
text-decoration:none;
line-height:2.3em;
border-top: 4px solid transparent;
border-right: 1px solid transparent;
border-bottom: 3px solid transparent;
border-left: 1px solid #848484;
}
/*hides the sub menu*/
#centeredmenu ul li ul li{
display: none;
}
/*displays sub menu on hover*/
#centeredmenu ul li:hover ul li {
display: block;
clear: both;
margin-left: 15px;
}
/*hides sub-sub menu*/
#centeredmenu ul li ul li ul{
display: none;
}
/*displays sub-sub menu on hover*/
#centeredmenu ul li ul li:hover ul {
display: block;
clear: both;
margin-left: 15px;
}