如何写一个导航和它的子选项，以及各种效果？

最新推荐文章于 2023-06-09 22:36:08 发布

原创最新推荐文章于 2023-06-09 22:36:08 发布 · 348 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用HTML和CSS创建导航菜单的方法，包括下拉菜单的实现，通过代码示例详细展示了如何设置导航条样式及响应鼠标悬停效果。

写导航主要使用列表，直接看代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
			.nav1{width:100%;height:40px;background:#fafafa;}
			.nav1 li{float:left;list-style:none;text-align:center;line-height:40px;position:relative;}
			.nav1 li a{text-decoration:none;color:black;width:100px;height:40px;display:inline-block;}
			.nav1 li a:hover{background:#ddd;color:orange;}
			.nav1 li ul{display:none;position:absolute;left:-40px;}
			.nav1 li:hover ul{display:block;}
			.nav2 li a{border:1px solid orange;width:98px;}
		</style>
    </head>
    <body>
		<ul class="nav1">
			<li><a href="##">登录</a></li>
			<li><a href="##">微博</a>
				<ul class="nav2">
					<li><a href="##">私信</a></li>
					<li><a href="##">评论</a></li>
					<li><a href="##">@我</a></li>
				</ul>
			</li>
			<li><a href="##">博客</a>
				<ul class="nav2">
					<li><a href="##">博客评论</a></li>
					<li><a href="##">未读提醒</a></li>				
				</ul>
			</li>
			<li><a href="##">邮箱</a>
				<ul class="nav2">
					<li><a href="##">免费邮箱</a></li>
					<li><a href="##">VIP邮箱</a></li>
					<li><a href="##">企业邮箱</a></li>
					<li><a href="##">新浪邮箱</a></li>
				</ul>
			</li>
			<li><a href="##">网站导航</a></li>
		</ul>
    </body>
</html>

导航截图01
导航截图02
有什么不懂的可以留言。