仅在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。