將鼠標懸停在菜單和子菜單上

我有一個垂直菜單，其中一些子菜單顯示在右側。當我懸停第一個菜單和子菜單時，它顯示屬於第三個菜單的第二組子菜單。將鼠標懸停在菜單和子菜單上

<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

你的建議幫助我解決了這個問題。幫助確認。 –

將鼠標懸停在菜單和子菜單上

回答

相關問題