首先 一般HTML中的动态效果都是JS做的,不太推荐用CSS完成。
下面给出一小段CSS代码 仅供参考:
.dropdown-content {
display: none;//隐藏下拉菜单的内容
position: absolute;
background-color: #f9f9f9;
min-width: 160px;最小宽度
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//做边框阴影
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
//hover设置光标悬停未点击之前的样式
.dropdown:hover .dropdown-content {
display: block;
}//鼠标悬停显示下拉菜单
.dropdown:hover .dropbtn {
background-color: #f5f5f5;
}
首先定义一个 dropdown的类 然后定义 HOVER的伪类实现一些特效。