HTML导航栏

风筱默染

已于 2022-05-23 14:33:30 修改

阅读量2.7w

点赞数 39

文章标签： html css html5

于 2021-09-01 14:14:45 首次发布

本文链接：https://blog.csdn.net/m0_51700376/article/details/120038747

版权

效果如图：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
	*{
		margin:0 auto;
		padding: 0;
	}
	.nav {
	    width: 1200px;
	    height: 50px;
	}
	ul li {
	    list-style: none;/* 去掉小圆点 */
	}
	ul a {
	    text-decoration: none;/* 去掉下划线 */
	}
	ul li { /*一级菜单的样式 */
	    float: left;
	    width: 100px;
	    height: 50px;
	    line-height: 50px;/* 行高等于高使文字垂直居中 */
	    text-align: center;
	    background: #008CBA;
			font-size: 20px;/*字体大小*/
	}
	ul li ul li{
	    display: none;/* 隐藏二级菜单 */
	}
	ul li:hover ul li { /* 鼠标经过时显示二级菜单 */
	    display: block;/* 二级菜单转化为块级元素,使其独占一行 */
	}
	ul li:hover {
	    background-color: #F44336;/* 鼠标经过时显示的背景颜色 */
	}
</style>
</head>
<body>
	<!-- 导航栏 -->
	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">一级菜单</a>
				<ul>
					<li><a href="#">二级菜单</a></li>
					<li><a href="#">二级菜单</a></li>
					<li><a href="#">二级菜单</a></li>
					<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>
					<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="#">一级菜单</a>
				<ul>
					<li><a href="#">二级菜单</a></li>
					<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>
	   </ul>
	</div>
</body>
</html>

风筱默染

关注

39
点赞
踩
343

收藏

觉得还不错? 一键收藏
打赏
4
评论
HTML导航栏

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航栏</title><style type="text/css"> *{ margin:0 auto; padding: 0; } .nav { width: 1200px; height: 50px; } ul li { list-style: none
复制链接

扫一扫