css导航栏下拉菜单特效
时间: 2023-07-25 09:25:26 浏览: 51
好的,下面是一个简单的 CSS 导航栏下拉菜单特效的实现方法:
HTML 结构:
```html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
CSS 样式:
```css
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #eee;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
color: #333;
font-weight: bold;
text-decoration: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin: 0;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
padding: 10px;
color: #333;
font-weight: bold;
text-decoration: none;
}
nav ul ul li:hover {
background-color: #f9f9f9;
}
```
上述代码实现了一个简单的 CSS 导航栏下拉菜单特效,当鼠标悬停在 Services 栏目上时,会出现下拉菜单,菜单中包含 Web Design、Web Development 和 SEO 三个选项。