我已經使用這個方法來集中對準我的菜單：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support 所有嵌套菜單顯示懸停時在菜單中，而不是僅僅是第一

我有，雖然我的選擇問題。我正在使用的選擇器顯示鏈接應用於所有嵌套標記的子菜單和樣式。

我已閱讀+運算符選擇下一個兄弟，但我嘗試過的東西，如#menu-main-menu-container li:hover a + ul，但它不起作用。懸停選擇器讓我有些困惑。

我包括下面的代碼片段。有人可以告訴我，我應該如何選擇第一次出現時，將鼠標懸停在li上方？

我也有第二個嵌套子菜單沒有正確對齊的問題，但我認爲這可能是由於我已經居中菜單的方式，並不確定如果這是可以修復的。

任何幫助表示讚賞。

#menu-main-menu-container { 
 
    width: 100%; 
 
    position: relative; 
 
    font: 300 16px/16px Lato, Arial; } 
 
    #menu-main-menu-container ul { 
 
    position: relative; 
 
    text-align: center; 
 
    float: left; 
 
    left: 50%; 
 
    margin: 0; 
 
    padding: 0; } 
 
    #menu-main-menu-container ul ul { 
 
     position: absolute; 
 
     display: none; 
 
     margin-top: 15px; } 
 
     #menu-main-menu-container ul ul ul { 
 
     right: 0; } 
 
    #menu-main-menu-container ul li { 
 
    right: 50%; 
 
    background-color: #f4f4f4; } 
 
    #menu-main-menu-container li { 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    padding: 15px; 
 
    margin: 0; 
 
    text-transform: uppercase; } 
 
    #menu-main-menu-container li:hover ul { 
 
     display: block; } 
 
    #menu-main-menu-container a { 
 
    white-space: nowrap; 
 
    text-decoration: none; 
 
    color: blue; } 
 
    #menu-main-menu-container li:hover { 
 
    background-color: blue; 
 
    transition: 1s; } 
 
    #menu-main-menu-container li:hover a { 
 
    color: white; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="top-nav-menu.css"> 
 
</head> 
 
<body> 
 
<div id="menu-main-menu-container"> 
 

 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a> 
 
      <ul> 
 
       <li><a href="#">Sub Item 1</a> 
 
        <ul> 
 
         <li><a href="#">Hidden Sub Item 1</a></li> 
 
         <li><a href="#">Hidden Sub Item 2</a></li> 
 
         <li><a href="#">Hidden Sub Item 3</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Sub Item 2</a></li> 
 

 
       <li><a href="#">Sub Item 3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Item 3</a></li> 
 
    </ul> 
 
</div> 
 
</body> 
 
</html>

來源

2015-10-08 Guerrilla

也許有：

#menu-main-menu-container li:hover > ul

操作`>`

如果使用>運營商可以確保ul必須是li:hover直接孩子。

來源

2015-10-08 00:42:46 lilezek

很感謝。這解決了它。只需要現在制定定位:) – Guerrilla

所有嵌套菜單顯示懸停時在菜單中，而不是僅僅是第一

回答

操作>

相關問題

操作`>`