Html 如何在css菜单中添加悬停下拉菜单

可能重复：

我有一个水平显示类别的现有菜单。当您将鼠标悬停在每个类别上时，我如何使其下拉垂直链接列表？就像传统的菜单一样

以下是我到目前为止的情况：

​这里有一个例子

---

尝试启动下拉菜单。。

---

你试过什么？你可以看看dynamicDrive上的代码，他们在这里制作了一个多级下拉菜单……请表明你至少尝试过一些东西。手边的问题与CSS（几乎）一样古老，并且已经通过许多不同的方式得到解决。谷歌是你的朋友。你能在你的问题中加入“垂直链接列表”吗？任何提示都将不胜感激！

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

#nav li a:hover 
{
   background-color:#333333;
   padding-bottom:12px;
   border-bottom:2px;
   border-bottom-color:#f37022;
   border-bottom-style:solid;
   margin:-1px;
}
#nav li a 
{   
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #123261;
   color:#ffffff;
   border-bottom:1px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
}
#nav li 
{
    display:inline;
}
#nav
{
    padding:0;
}