使用CSS+HTML完成导航栏_用html+css做一个导航条代码-CSDN博客

本文链接：https://blog.csdn.net/2201_75294631/article/details/137462785

实验要求：

使用CSS+HTML完成导航栏

运行代码：

html

<html style="
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    border-top-width: 10px;
"><head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../css1/导航栏测试.css">
		<title></title>
	</head>
	<body>
		
		<nav id="navbar">
			<ul>
				<li><a href="#">穿越火线</a></li>
				<li>
					<a href="#">英雄联盟</a>
					<ul>
						<li><a href="#">春季赛</a></li>
						<li><a href="#">年度总决赛</a></li>
					
			         
					</ul>
					</li>
				<li>
					<a href="#">地下城与勇士</a>
					<ul>
						<li><a href="#">旭旭宝宝</a></li>
						<li><a href="#">套你猴子</a></li>
						<li><a href="#">大马猴</a></li>
					</ul>
					</li>
				<li><a href="#">fifa足球世界</a>
				<ul>
					<li><a href="#">大罗</a></li>
					<li><a href="#">梅西</a></li>
				</ul></li>
				<li>
					<a href="#">我的世界</a>
					
					</li>
				<li><a href="#">战地5</a></li>
				<li>
					<a href="#">实况足球</a>
					
					</li>
				
					
				
			</ul>
		</nav>

	
</body>
</html>

css

/* 导航条 CSS样式 */


#nav{/*设置最外面的div属性*/
    width: 960px;/*宽*/
    height: 35px;/*高*/
    background-color: #e74141;/*背景颜色*/
    margin: 0 auto;/*div对齐方式居中*/
    margin-top: 30px;/*上边距*/
    border: 20px 30px 40px ;
   
}

body,ul,li{
	margin:0;
	padding:0;
	list-style: none;
}

 

#navbar{
	width:100%;
	height:42px;
	background:rgb(28, 75, 169);
	
}
#navbar ul{
	background:rgb(28, 75, 169);
	width:1500px;
	margin: 0 auto;/* 水平居中 */
}
#navbar ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:150px;
	height:42px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#navbar>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}
#navbar a{
	text-decoration: none;/* 去掉下划线 */
	/* text-decoration: underline; 下划线*/
	/* text-decoration: overline;线在上面 */
	color: #fff;/* 字体颜色为白色 */
	text-align: center;
	line-height: 42px;/*行高*/
	font-size: 14px;
	
}
#navbar a:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: underline;
	color:orange;
}
#navbar li ul{/* 父子选择器,设置的是li里的ul（二级菜单），如学校要闻、系统概述 */
	display: none;/* 隐藏元素 */
	 width: 120px;
	 text-align: center;
	 float: left;
	/* text-align: left; */
}
#navbar>ul>li:hover ul{/*hover的不是li，而是li的孩子ul （通过li选择到孩子里的ul） */
	display:block;
	width: 160px;
	font-size: 6px;
	/* 显示元素 */
}