将鼠标悬停在菜单和子菜单上

我有一个垂直菜单，其中一些子菜单显示在右侧。当我悬停第一个菜单和子菜单时，它显示属于第三个菜单的第二组子菜单。将鼠标悬停在菜单和子菜单上

<body> 
<ul class="menu"> 
    <li><a href="#">Population and Socio-Economic Atlas</a> 
     <ul> 
      <li><a href="#" class="chapter1">Population</a> 
       <ul> 
        <li><a href="#" class="map11">Population Density</a></li> 
        <li><a href="#" class="map12">Population By Sex</a></li> 
        <li><a href="#" class="map13">Population By Age</a></li> 
       </ul> 
      </li> 
      <li><a href="#" class="chapter2">Education</a></li> 
      <li><a href="#" class="chapter3">Agriculture</a> 
       <ul> 
        <li><a href="#" class="map31">Agricultural Land</a></li> 
        <li><a href="#" class="map31">Agriculture Holding</a></li> 
        <li><a href="#" class="map31">Agriculture By Type</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Level1 Menu2</a></li> 
    <li><a href="#">CA Election 2070</a> 
     <ul> 
      <li><a href="#" class="election1">Districts</a></li> 
      <li><a href="#" class="election2">Constituencies</a></li> 
      <li><a href="#" class="election3">Result</a> 
       <ul> 
        <li><a href="#" class="election31">District Map</a></li> 
        <li><a href="#" class="election32">Constituencies Map</a></li> 
        <li><a href="#" class="election33">Election Result 2070</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">To Be Continued</a></li> 
</ul> 
</body>

我下面的CSS：

.menu, 
.menu ul, 
.menu li, 
.menu a { 
    margin: 5px; 
    padding: 0; 
} 
.menu { 
    height: 250px; 
    width: 300px; 
    background: #FFCC99; 
} 
.menu li { 
    width:100%; 
    height:25px; 
    text-align:left; 
    display: block; 
    padding: 0 0px; 
    margin: 3px 0px; 
    line-height: 25px; 
    border-bottom: 1px solid #393942; 
} 

.menu li a { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    text-decoration: none; 
    font-size: 14px; 
} 
.menu li:hover > a { color: #FF0000; } 

/* second level menu */ 
.menu ul { 
    position: relative; 
    width: 200px; 
    top: -26px; 
    left: 295px; 
    opacity: 0; 
    background: #CCCCCC; 
} 
.menu li:hover > ul { opacity: 1; } 
.menu ul li { 
    height: 25px; 
    overflow: hidden; 
    padding: 0 0px; 
    width: 200px; 
    padding: 0 0px; 
    margin: 6px 0px; 
    border: none; 
    border-bottom: 1px solid #353539; 
} 
.menu li:hover > ul li { 
    height: 25px; 
    overflow: visible; 
    padding: 0 0px; 
} 

.menu ul li a { 
     font-family: Helvetica, Arial; 
    font-style: italic; 
    font-weight: normal; 
    font-size: 12px; 
} 
.menu ul li:last-child a { border: none; } 

/* third level menu */ 
.menu ul ul { 
    position: relative; 
    width: 200px; 
    top: -26px; 
    left: 195px; 
    opacity: 0; 
    background: #00FF00; 
} 
.menu ul ul:hover > ul { opacity: 1; } 
.menu ul ul li { 
    height: 25px; 
    overflow: hidden; 
    padding: 0 0px; 
    width: 200px; 
    padding: 0 0px; 
    margin: 6px 0px; 
    border: none; 
    border-bottom: 1px solid #0000FF; 
} 
.menu ul ul ul:hover > ul { 
    height: 25px; 
    overflow: visible; 
    padding: 0 0px; 
} 

.menu ul ul li a { 
    font-family: Helvetica, Arial; 
    font-style: italic; 
    font-size: 12px; 
} 
.menu ul li:last-child a { border: none; }

如何解决这个问题呢？

来源

2013-12-11 Suresh Man Shrestha

请尝试用jsbin.com来解释这些问题。如果他们了解问题，人们会很乐意帮助 – sachinjain024

或者JSFiddle - http://jsfiddle.net/ – ZenMaster

嗨，你能详细描述你的问题吗，我在jsfiddle上测试你的代码，我认为它工作正常:) – Merlin

您需要使用display: block/none;而不是overflow: hidden/visible来隐藏/取消隐藏子菜单。

Here's the fiddle

overflow仅影响该元素的可见性。该元素仍然存在于DOM中，并响应/触发与其关联的所有事件。因此，这个问题。

来源

2013-12-11 07:10:50

问题已经解决了。确认。 –

如果解决方案帮助您解决问题，请考虑接受答案。谢谢 –

发生这种情况是因为您使用opacity来隐藏子菜单。当opacity为0时，子菜单仍在页面上，并接收鼠标事件。子元素添加到较低的元素，在可见性堆栈中较高，并且这就是为什么他们盗取hover。而不是opacity使用display。小提琴：http://jsfiddle.net/mL3eD/

来源

2013-12-11 07:14:56 Krzysztof

你的建议帮助我解决了这个问题。帮助确认。 –

将鼠标悬停在菜单和子菜单上

回答

相关问题