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中的某处添加新元素（或触发其可见性）。对于初学者来说，这不是最简单的事情！

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

1 个答案: