HTML:如何使水平导航栏具有下拉菜单

Question

我对HTML/CSS编码还很陌生，但我目前正在学习和开发一个网站。然而，我有点拘泥于导航栏的操作过程。我设法找到了一个导航栏，一个水平的，有工作背景图像的导航栏。我遇到的一件事是导航栏有下拉菜单，如下所示：http://maxcdn.webappers.com/img/2008/10/free-css-drop-down-menu.png.除非没有额外的子菜单。到目前为止，我拥有的是：

HTML:

<div id="menu">
<ul>
<li><a href="">home</a></li>
<li><a href="">blank</a></li>
<li><a href="">about</a></li>
<li><a href="">site</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="unknown.jpg" style='width:100%;height:100%'/>
</div>

CSS：

#menu {
    width: auto;
    height: auto;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}
#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    display: inline;
}
#menu li { 
display: inline; 
padding: 20px; 
}
#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}
#menu a:hover {
    color: #F90;
    background-color: #FFF;
}

如果这个问题相对容易回答，很抱歉，但我遇到了麻烦。我不知道如何将我的HTML代码更改为访问者可以将鼠标悬停在联系人上的代码，例如，他们可以选择"管理员"或"其他"。非常感谢。

Answer 1

您需要定义相关元素的onmouseover事件，然后使用一些Javascript在菜单div中的某个位置添加新元素（或触发它们的可见性）。对于初学者来说，这不是最容易的事情！