css-二级菜单
2018-12-12 本文已影响0人
杰伊_约翰
二级菜单
简单来说就是前者为“ul”无序列表设置隐藏，当鼠标经过的时候显示，依次是设置“display:none”，“display:block”；当然要注意的是要给父级元素设置“hover”，也就是我代码中的类“box1”不然鼠标移出后二级菜单就立马消失了。一些css的样式就比较简单了，即使是小白也可以很快入手。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h3{
text-align: center;
color: white;
}
.box1{
width: 100px;
height: 24.8px;
background-color: gold;
margin: 0 auto;
border-radius: 5px;
}
.menu{
display: none;
list-style:none;
text-align: center;
background-color: orange;
border-radius: 5px;
}
a{
width: 100%;
text-decoration: none;
color: white;
}
.box1:hover .menu{
display: block;
font-weight: bold;
}
li:hover{
border-radius:5px;
background-color: green;
}
</style>
<body>
<div class="box1">
<h3>全部菜单</h3>
<div class="box2">
<!-- <div class="box3"> -->
<ul class="menu">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
</ul>
<!-- </div> -->
</div>
</div>
</body>
</html>
kk 2018-12-12 15-15-46.gif
