子菜單項不停留在懸停位置

子菜單項在懸停時不會停留在那裏。例如，在懸停Portals時，ul會顯示，但當我想向下移動以點擊它時，不會停留在那裏。子菜單項不停留在懸停位置

HTML

<div id="menu"> 
<div class="container"> 
    <ul> 
    <li><a href="#">Home</a> 
    </li> 
    <li><a href="#">About SRJC</a> 
    </li> 
    <li><a href="#">Admission</a> 
    </li> 
    <li><a href="#">The SR Programmes</a> 
    </li> 
    <li><a href="#">CCAs</a> 
    </li> 
    <li><a href="#">Portals</a> 

     <ul class="submenu"> 
      <li><a href="#">ASPIRE</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Staff & Parents</a> 
    </li> 
    </ul> 
</div> 
</div>

來源

2014-02-09 D. WONG

嘗試爲您的子菜單項添加「margin-top：-1px」。這是菜單和導致此問題的子菜單之間的1px空間。 – Joeytje50

@ Joeytje50不，沒有達到要求。 –

如何將'#menu li a'上的填充更改爲'padding：10px 20px 14px 20px;'，這是否有效？ – Joeytje50

要解決這個問題，你需要設置你的#menu li a到10px 20px 14px 20px;您的填充代替，讓您的代碼：

#menu li a { 
    display: inline; 
    padding: 10px 20px 14px 20px; 
    margin: 0; 
    color: #fff; 
    text-decoration: none; 
}

爲了解釋爲什麼這項工作，我首先需要解釋爲什麼這首先出錯了。

當父母<li>懸停時，通過顯示子菜單來觸發子菜單的打開。這<li>的孩子<a>有一個設置的填充，但該填充不擴展父菜單<ul>元素的整個高度。因此，<a>和子菜單<ul>之間有一小部分空間，當您試圖將鼠標懸停在子菜單上時，會導致子菜單再次崩潰：它必須移動一小段空間。

隨着底部填充的增加，修復了這個問題，因爲它佔用<li>和子菜單<ul>之間的一小部分空間。

來源

2014-02-09 02:31:04 Joeytje50

所有你不需要使用不透明的第一：0，當您使用顯示：沒有，其次，UL不留下，因爲如果你仔細注意到父母李和子菜單之間存在差距。在父項目上重疊子菜單至少1px應該完成這項工作。

同時刪除該

position: absolute; 
top: 40px;

從

#menu ul li ul li { 
}

Fiddle

來源

2014-02-09 02:30:16

此外，ul li會將所有的li，即使在子菜單中。 li a也一樣。如果你只想定位直接的li，你應該使用立即的子選擇器，即ul.parent> li或者 –

如果你有一些東西要添加到答案中，你可以使用它下面的「編輯」按鈕將它添加到你的回答。通常這比評論你自己的問題要好。 – Joeytje50

謝謝，但我認爲這個信息與問題沒有直接關係，所以我將其添加爲評論。 –

子菜單項不停留在懸停位置

回答

相關問題