HTML二级菜单
程序员文章站
2022-06-01 18:15:00
...
二级菜单
代码
<html>
<head>
<title>二级菜单</title>
<meta charset="utf-8">
<style type="text/css">
.news div{
margin:50px;
width: 40px;
}
.news div>a{
margin-left: 30px;
width:30px;
height: 30px;
content: url("news.png");
}
.news div>ul{
width:90px;
height: 192px;
margin:0px 0px;
position: absolute;
display: none;
}
.news ul ,.new li{
padding :0px 0px;
margin: 0px 0px;
list-style: none;
}
.news >div>ul>li>a{
color:#3d3d3d;
font-size: 12px;
text-decoration:none;
display: block;
}
.news >div>ul>li>a:hover{
background-color:#f5f5f5;
color:#ff9ee5;
}
.news >div>ul>li{
width: 90px;
height: 24px;
text-align: center;
line-height: 24px;
background:#d9d9d9;
}
.news >div:hover ul{
display: block;
}
</style>
</head>
<body>
<div class="news">
<div>
<a href="#"></a>
<ul>
<li ><a href="#">公告</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">关注</a></li>
<li><a href="#">点赞</a></li>
<li><a href="#">私信</a></li>
<li><a href="#">回答</a></li>
<li><a href="#">系统通知</a></li>
<li><a href="#">消息设置</a></li>
</ul>
</div>
</div>
</body>
</html>
效果
设置css样式
<style type="text/css">
<a>标签的大小设置：
设置display：block;再设置width和height
设置鼠标停留在
<a>标签上时的效果：
定义一个css 类选择器
.css a:hover{
background:#ff9ee5;
}
隐藏标签
display:none;
去掉li的样式
list-style:none;
外边距 margin
内边距 padding
上一篇： OpenCV3之——边缘检测Canny算子的高阶用法
下一篇： 仿Js的二级菜单