编写下拉菜单,实现导航二级菜单效果 html
时间: 2023-05-17 18:03:24 浏览: 87
可以使用HTML和CSS来实现下拉菜单,以下是一个简单的例子:
HTML代码:
```
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a>
<ul>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
</ul>
</li>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
padding: 5px 10px;
color: #333;
}
```
这段代码会生成一个带有下拉菜单的导航栏,当鼠标悬停在“新闻”或“产品”上时,会显示二级菜单。