如何添加下拉到這個簡單的導航欄？

Question

對不起，如果這是一個愚蠢的問題，但我期待添加一個項目的下拉列表到這個導航欄。這是在一個navbar.php文件，這裏是代碼：

<link rel="stylesheet" href="/styles/navbar.css" type="text/css" /> <!-- navbar styles --> 

<ul id="nav"> 
    <li><a href="/index.php">Home</a></li> 
    <li><a href="/item1/">Item 1</a></li> 
    <li><a href="/item2/">Item 2</a></li> 
    <li><a href="/item3/">Item 3</a></li> 
    <li><a href="/item4/">Item 4</a></li> 
</ul> 

這裏的navbar.css文件：

#nav 
{ 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; 
    background-color: #242424; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position:fixed; 
    top:0px; 
} 

#nav li 
{ 
    float: left; 
} 

#nav li a 
{ 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #7ACC01; 
    border-right: 1px solid #ccc; 
} 

#nav li a:hover 
{ 
    color: #c00; 
    background-color: #fff; 
} 

所以我的問題是，是否有添加項目的下拉列表中的一個簡單的方法來「項目4「例如，下拉菜單將出現在鼠標懸停？

Answer 1

我想讓你知道我們是如何做到的，而不是給你魚。用棒，你總是可以自己釣魚。

看看我這個提琴做了：

http://jsfiddle.net/jLkeH/

它實際上涉及到這一點：

nav ul ul { 
    display: none; 
} 

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

你要隱藏你想切換，並設置它ul回到可見如果有人盤旋就可以了。 PS：正如你所看到的，我使用了HTML5，這是推薦的，因爲它（更）是語義的。