html导航栏下拉，实现代码[通俗易懂]

全栈程序员-站长 • 2022年5月28日上午9:20 • 未分类 • 阅读 60

大家好，又见面了，我是你们的朋友全栈君。

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{ 
   padding: 0px;margin: 0px;box-sizing: border-box;}
			ul,ol{ 
   list-style-type: none;}
			a{ 
   text-decoration: none;color: #333;}
			img{ 
   border: none;}
			section{ 
   width:1220px ;height: 600px;border: #000000 solid 1px;margin: 2px auto;}
			footer{ 
   width: 1220px;height: 60px; border: #000000 solid 1px;margin: 0px auto;}
			header{ 
   width: 1220px;height: 60px; border: #000000 solid 1px;margin: 0px auto;}
			#main ul .p1:nth-of-type(1){ 
   
				display: inline-block;/* ul下的li的内容以块级元素的横排形式排列 */
				padding: 5px 20px 5px 20px;
				position: absolute;
				left: 100px;
				
			}
			#main ul .p1:nth-of-type(2){ 
   
				display: inline-block;
				padding: 5px 20px 5px 20px;
				position: absolute;
				left: 200px;
				
			}
			#main ul .p1:nth-of-type(3){ 
   
				display: inline-block;
				padding: 5px 20px 5px 20px;
				position: absolute;
				left: 300px;
				
			}
			#main ul .p1:nth-of-type(4){ 
   
				display: inline-block;
				padding: 5px 20px 5px 20px;
				position: absolute;
				left: 400px;
			}
			#main ul .p2{ 
   
				display: none;/* 隐藏下拉框 */
				border: #000000 solid 2px;
				width: 100px;
				height: 200px;
				top: 32px;
				position: absolute;
				background: #000000;
				color: #FFFFFF;
				font-family: "楷体";
				font-size: 16px;
				line-height: 30px;
				text-indent: 1em;
				font-weight: bold;
				margin-left: -20px;
				}
			#main ul .p1:hover .p2{ 
   
					display: block;
			}
			#main{ 
   
				margin: 15px auto;
				padding-left: 3em;
				position: relative;
			}/* nav内的所有内容在header中的位置 */
			
		</style>
	</head>
	<body>
		<header>
			<nav id="main">
			<ul>
				
				<li class="p1">首页
				<ul class="p2">
					<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 class="p1">活动
					<ul class="p2">
						<li><a href="#">活动1</a></li>
						<li><a href="#">活动2</a></li>
						<li><a href="#">活动3</a></li>
						<li><a href="#">活动4</a></li>
						<li><a href="#">活动5</a></li>
					</ul>
				</li>
				
				<li class="p1">商店
					<ul class="p2">
						<li><a href="#">商店1</a></li>
						<li><a href="#">商店2</a></li>
						<li><a href="#">商店3</a></li>
						<li><a href="#">商店4</a></li>
						<li><a href="#">商店5</a></li>
					</ul>
				</li>
				
				<li class="p1">咨询
					<ul class="p2">
						<li><a href="#">客服咨询</a></li>
						<li><a href="#">BUG咨询</a></li>
						<li><a href="#">产品咨询</a></li>
						<li><a href="#">内容咨询</a></li>
						<li><a href="#">活动咨询</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		</header>
		
		<section>
			
			
		</section>
		<footer>
			
		</footer>
	</body>
</html>