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

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

代码如下（示例）：

<!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>