仿京东左侧菜单 使用hover实现鼠标
时间: 2024-05-13 16:17:58 浏览: 178
好的,以下是一个简单的示例代码,实现了一个类似京东左侧菜单的效果:
HTML代码:
```
<div class="menu">
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">运动</a></li>
<li><a href="#">美食</a></li>
</ul>
<div class="submenu">
<ul>
<li><a href="#">小米</a></li>
<li><a href="#">华为</a></li>
<li><a href="#">苹果</a></li>
<li><a href="#">三星</a></li>
</ul>
</div>
</div>
```
CSS代码:
```
.menu {
width: 200px;
height: 100%;
background-color: #f2f2f2;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
position: relative;
}
.menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.menu a:hover {
background-color: #e6e6e6;
}
.submenu {
position: absolute;
top: 0;
left: 200px;
width: 200px;
height: 100%;
background-color: #fff;
display: none;
}
.submenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.submenu li {
position: relative;
}
.submenu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.submenu a:hover {
background-color: #e6e6e6;
}
.menu li:hover .submenu {
display: block;
}
```
这里的关键点是使用 `:hover` 伪类,对父级菜单项进行样式设置,当鼠标悬停在菜单项上时,通过相邻兄弟选择器 `+` 或后代选择器 ` `,对子菜单进行样式设置并显示出来。
阅读全文