HTML二级菜单

最新推荐文章于 2024-05-27 17:27:19 发布

Hysea.

最新推荐文章于 2024-05-27 17:27:19 发布

阅读量826

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44589374/article/details/104707204

版权

二级菜单

在这里插入图片描述

代码

<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

Hysea.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML二级菜单

二级菜单代码<html><head> <title>二级菜单</title> <meta charset="utf-8"> <style type="text/css"> .news div{ margin:50px; width: 40px; } .news div>a{ m...
复制链接

扫一扫