css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见。
下面用css设置下拉菜单样式。
<!DOCTYPE html>
<html>
<head>
<title>淘宝</title>
<meta charset="utf-8">
<body>
<div class=dropdown>
<button class="dropbtn">我的淘宝</button>
<div class="dropdown-content">
<a href="#">已买到的宝贝</a>
<a href="#">我的足迹</a>
</div>
</div>
</body>
</html>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;
} 相关推荐
Mexican 2011-01-20
zhrookie 2012-02-03
89307547 2016-11-29
luckyeyefocus 2017-05-22
javadeaihaozhe 2018-01-05
tthappyer 2018-11-27
deng 2007-11-29
ThikHome 2018-01-05
zhanghaibing00 2017-05-22
WRITEFORSHARE 2016-11-29
libowen0 2019-06-28
tthappyer 2014-12-15
LadyZhong 2014-03-25
zljiaa 2014-03-01
83493467 2014-02-28