HTML5使用ul li做下拉列表

最新推荐文章于 2021-09-22 19:23:23 发布

今夕今年

最新推荐文章于 2021-09-22 19:23:23 发布

阅读量7.8k

点赞数 2

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/baidu_31481511/article/details/89467483

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			a{
				text-decoration: none;
				
			}
			a:hover{
				background-color: yellow;
			}
			ul{
				list-style: none;
			}
			ul li{
				float: left;
				margin-left: 20px;
			}
			#ul2 li{
				clear: both;
				margin:0px;
			}
			#ul2{
				display: none;
			}
			#ul1 #ul1_li1:hover #ul2{
				display: block;
			}
		</style>
	</head>
	<body>
		<ul id="ul1">
			<li id="ul1_li1"><a href="#">淘宝</a>
				<ul id="ul2">
					<li ><a href="#">女装</a></li>
					<li><a href="#">男装</a></li>
					<li><a href="#">童装</a></li>
				</ul>
			</li>
			<li><a href="#">京东</a></li>
			<li><a href="#">美团</a></li>
			<li><a href="#">当当</a></li>
			
		</ul>
	</body>
</html>