僅在CSS中懸停列表

Question

我在使用CSS滾動菜單時遇到了一些問題。

我見過很多，有教程，但有太多不必要的代碼，我很難區分哪些是需要的代碼，哪些只是其他的CSS。

我想只在CSS上有一個懸停菜單，因爲我正在處理的網站有很多有意禁用腳本的用戶（JavaScript）。

我不明白，在CSS中，當用戶將鼠標懸停在父列表項上時，如何讓「子菜單」出現在其父列表項下方。有人可以幫我理解這是如何在CSS中工作的嗎？

下面是什麼，我指的是圖像：

Answer 1

下面的工作，其基本形式爲自己的口味（位置，邊框，顏色，但風格等）：

<ul> 
    <li>Simple List item 
     <ul> 
      <li>sub menu item 1</li> 
      <li>sub menu item 2</li> 
      <li>sub menu item 3</li> 
     </ul> 
    </li> 
</ul> 

隨着CSS：

ul li { 
    position: relative; 
} 

ul ul { 
    position: absolute; 
    top: 1em; 
    left: 0; 
    display: none; 
} 

ul > li:hover ul { 
    display: block; 
} 

JS Fiddle demo。