HTML实现简单水平导航栏

最新推荐文章于 2024-04-02 07:41:36 发布

guiqiu1111

最新推荐文章于 2024-04-02 07:41:36 发布

阅读量3.9k

点赞数 3

文章标签： html css3

本文链接：https://blog.csdn.net/weixin_50256767/article/details/126734022

版权

一、效果图

在这里插入图片描述

二、代码实现

1、HTML部分

	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li class="dropdown"><a href="#">概况</a>
			<div class="dropdown-con">
				<a href="#">111</a>
				<a href="#">222</a>
				<a href="#">333</a>
			</div>
		</li>
	</ul>

2、CSS部分

			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #333;
			}
			li{
				float: left;
			}
			li a{
				display: inline-block;
				color: white;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
			}
			li a:hover,.dropdown:hover{
				background-color: red;
			}
			li.dropdown{
				display: inline-block;
			}
			.dropdown-con{
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}
			.dropdown-con a{
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
				text-align: center;
			}
			.dropdown-con a:hover{background-color:#f1f1f1;}
			.dropdown:hover .dropdown-con{
				display: block;
			}