web：菜单按钮

最新推荐文章于 2024-07-18 16:15:24 发布

平平无奇的咸鱼

最新推荐文章于 2024-07-18 16:15:24 发布

阅读量234

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_61986054/article/details/128055301

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" type="text/css" href="1.css">
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<ul>
	<li id="li"><a href="#">一级菜单</a></li>

	<li id="li" class="one"><a href="#">一级菜单</a>
	<ul class="ul1">
	<li class="li1"><a href="#">二级菜单</a></li>
	<li class="li1"><a href="#">二级菜单</a></li>
	<li class="li1"><a href="#">二级菜单</a></li>
	<li class="li1"><a href="#">二级菜单</a></li>
	<li class="li1"><a href="#">二级菜单</a></li>
	</ul>
	</li>

	<li id="li"><a href="#">一级菜单</a></li>
	<li id="li"><a href="#">一级菜单</a></li>
	<li id="li"><a href="#">一级菜单</a></li>
	</ul>
</body>
</html>

*{
	margin: 0;
	padding: 0;	
	text-decoration: none;
}
li{
		border: 1px solid block;
		background: red;
		height: 25px;
		widows: 100px;
		
		list-style: none;                                                                                                                                                             
}	
#li{
	float: left;
}
.ul1{
	display: none;
}
.ul1 .li1{
	overflow: hidden;
	
}
.one:hover .ul1{
	display: block;
	position: absolute;
   
}

效果：