懸停顯示子菜單

Question

如何在懸停時顯示子菜單？我沒有看到有什麼錯我有什麼 - （！但顯然有些不對勁，因爲它不工作）

HTML

<div> 
    <ul> 
    <li><a id="ALink" href="#">A</a></li> 
     <ul id="SubMenu"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     </ul> 
    <li><a id="BLink" href="#">B</a></li> 
    <li><a id="CLink" href="#">C</a></li> 
    </ul> 
</div> 

CSS

#SubMenu { 
display: none; 
width: 200px; 
height: 200px; 
background: #00C; 
} 

#ALink:hover #SubMenu { 
    display: block; 
    } 

JSFiddle - 從目前的代碼中可以看出，當鼠標懸停在選項「A」上時顯示一個菜單。

Answer 1

你必須有該元素的子菜單，將與它聯繫起來：

<div> 
    <ul> 
    <li><a id="ALink" href="#">A 
     <ul id="SubMenu"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     </ul> 
    </a> 
    </li> 
    <li><a id="BLink" href="#">B</a></li> 
    <li><a id="CLink" href="#">C</a></li> 
    </ul> 
</div> 

Answer 2

下面的代碼應該工作。

HTML

<ul class="topmenu"> 
    <li class="submenu">A 
    <ul> 
    <li>Product 1</li> 
    <li>Product 2</li> 
    <li>Product 3</li> 
    </ul> 
    </li> 
    <li>B</li> 
    <li>C</li> 
</ul> 

CSS

下面的代碼是格式和縮進。

ul.topmenu, ul.topmenu ul { 
display: block; 
margin: 0; 
padding: 0; 
} 

ul.topmenu li { 
display: inline; 
list-style: none; 
margin: 0; 
padding-right: 1.5em; 
} 

子菜單仍然顯示在頁面上，這樣你就不得不隱藏：

ul.topmenu li ul { 
    visibility: hidden; 
} 

然後，所有你需要的是當用戶將鼠標懸停在出現的菜單附上清單項目：

ul.topmenu li.submenu:hover ul { 
    visibility: visible; 
}