纯css写的一个简单导航条

最新推荐文章于 2022-02-21 16:48:25 发布

iemacs

最新推荐文章于 2022-02-21 16:48:25 发布

阅读量327

点赞数

分类专栏： html 文章标签： html简单导航条

本文链接：https://blog.csdn.net/iemacs/article/details/50312821

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<strong><span style="font-size:18px;">nav.html:</span></strong>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>a simple navigation</title>
	<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li>
				<a href="#">公司产品</a>
				<ul>
					<li><a href="#">html</a></li>
					<li><a href="#">css</a></li>
					<li><a href="#">javascript</a></li>
					<li><a href="#">php</a></li>
				</ul>		
			</li>
			<li><a href="#">公司服务</a></li>
			<li><a href="#">股东投资</a></li>
			<li><a href="#">联系方式</a></li>
		</ul>
	</div>
</body>
</html>

nav.css:

* {margin: 0px; padding: 0px; text-decoration: none;}
#nav {font-size: 12px; width: 500px; height: 30px; border-bottom: 1px solid #000; margin: 20px auto;}

/* ----- 初始状态 ----- */
#nav ul {list-style: none;}
#nav ul li {float: left; position: relative;}
#nav ul li a {display: block; width: 100px; height: 20px; padding-top: 10px; text-align: center; background: #fff;}
#nav ul li ul {display: none; position: absolute; border: 1px solid #000;}

/* ----- 鼠标经过时让二级菜单显示 ------ */
#nav ul li:hover ul, #nav ul li a:hover ul {display: block; border-top: 1px solid #fff;}
#nav ul li a:hover {color: blue;}

/* ------ 二级菜单本身状态属性 ------ */
#nav ul li ul li {clear: both; text-align: center; font-size: 12px;}
#nav ul li ul li a {display: block; width: 98px; height: 30px; padding-top: 5px; background: #fff;}
#nav ul li ul li a:hover {color: red;}
/* 注意几点：
1.margin的前提：设置长宽
2.padding不要跟line-height一起使用？
3.注意写注释
 */