span标签实现导航栏下拉框

最新推荐文章于 2021-09-30 14:38:43 发布

今夕今年

最新推荐文章于 2021-09-30 14:38:43 发布

阅读量3k

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 1200px;
				height: 50px;
				background-color: #000;
				padding-top: 20px;
			}
			span{
				margin-left: 30px;
				width: 60px;
			}
			a{
				font-size: 1cm;
				text-decoration: none;
			}
			a:hover{
				background-color: yellow;
			}
			#span2 ul{
				position: absolute;
				left: 140px;
				list-style: none;
			}
			ul#ul1 li{
				display: none;
			}
			span:hover ul#ul1 li{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<span><a href="#">新闻</a></span>
			<span id="span2"><a href="#">科技</a>
				<ul id="ul1">
					<li><a href="#">星空</a></li>
					<li><a href="#">大海</a></li>
					<li><a href="#">陆地</a></li>
					<li><a href="#">地球</a></li>
				</ul>
				
				
			</span>
			<span><a href="#">生活</a></span>
			<span><a href="#">娱乐</a></span>
			<span><a href="#">军事</a></span>
		</div>
		<div style="width: 1200px;height: 700px;border: 1px solid red;background-color: #FFF; padding-top: 0px;">
			<div style="width: 900px;height: 700px;float: left;background-color: greenyellow;margin-top: 0px;">
				<h1 style="text-align: center;padding: 0px;">互联174</h1>
				
				
			</div>
			<div style="width: 300px;height: 700px;float: right;background-color: green;margin-top: 0px;">
				<h2 style="margin-top: 50px;margin-left: 40px;">右一</h2>
				<ul style="margin-top: 10px;margin-left: 20px;">
					<li>计划</li>
					<li>实施</li>
					<li>设计</li>
				</ul>
				<h2 style="margin-top: 50px;margin-left: 40px;">右一</h2>
				<ul style="margin-top: 10px;margin-left: 20px;">
					<li>计划</li>
					<li>实施</li>
					<li>设计</li>
				</ul>
			</div>
		</div>
	</body>
</html>