效果图预览
一 、css实现
HTML代码部分
rush:js;">
<Meta charset="UTF-8">
html+css下拉<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>
css部分
rush:js;">
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #000;
}
ul,li{
list-style: none;
}
.menu{
margin: 50px auto;
width: 500px;
height: 35px;
background-color: #ccc;
text-align: center;
line-height: 35px;
}
.menu li{
float: left;
width: 20%;
position: relative;
}
.menu li:hover ul{
display: block;
}
.menu li a{
display: block;
}
.menu li a:hover{
background-color: burlywood;
}
.menu li ul{
display: none;
position: absolute;
}
.menu li ul li{
width: 100%;
margin-top: 2px;
background-color: darkgray;
}
.menu li ul li:hover{
cursor: pointer;
background-color: chartreuse;
}
二、js实现
html和js部分（实现方法一）
rush:js;">
<Meta charset="UTF-8">
JS下拉<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>
菜单三
内容三
内容三
菜单四
- 内容三
html和js部分（实现方法二）
