大家好，又见面了，我是你们的朋友全栈君。
代码如下（示例）：
<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/140375.html原文链接：https://javaforall.net
