下拉菜单在网站中到处可见。
下面用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;}
