DW使用CSS制作下拉菜单,要求实现鼠标移到主菜单上时就显示二级菜单
时间: 2024-09-10 15:11:13 浏览: 18
在HTML5和CSS3中,可以利用`<nav>`标签创建一个下拉菜单,通过CSS定位和伪元素(如`:hover`)来实现鼠标悬停时二级菜单的显示。以下是一个基本的示例:
```html
<nav class="dropdown">
<ul class="main-menu">
<li><a href="#">主菜单1</a>
<ul class="sub-menu">
<li><a href="#">二级菜单项1</a></li>
<li><a href="#">二级菜单项2</a></li>
</ul>
</li>
<!-- 其他主菜单项 -->
</ul>
</nav>
```
然后使用CSS来设置样式:
```css
.dropdown {
position: relative;
}
.main-menu {
list-style-type: none;
display: inline-block;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.main-menu li:hover > .sub-menu {
display: block;
}
.sub-menu a {
padding: 12px 16px;
text-decoration: none;
color: black;
}
```
在这个例子中,当用户将鼠标移动到`<li>`元素上方时,其下的`.sub-menu`会因为`.main-menu li:hover > .sub-menu`选择器而显示出来。