1+X学习日志——导航栏demo
程序员文章站
2023-11-02 16:02:10
初级菜鸟的作品，各位大佬见笑了 ......
初级菜鸟的作品，各位大佬见笑了
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
ul,ol,li{
list-style:none;
}
a{
text-decoration: none;
}
/*给a去掉下划线*/
.nav{
width: 606px;
height: 40px;
background: #ccc;
margin: 100px auto;
}
div{
width: 100%;
height: 40px; /* 试图给ul加上一个整体div，使得看起来更舒服点=。= */
background: darkgrey;
}
.nav li{
float: left;
position: relative;
}
.nav li a{
display: block;
width: 100px;
height: 40px;
background-color:darkgrey;
border-right:1px solid #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
color: white;
}
.nav li a:hover{
background: darkgrey;
color: black;
text-decoration: underline;
}
.nav li .nav2{
position:absolute;
display:none;/*初始状态二级导航隐藏*/
}
.nav li:hover .nav2{
display: block;
}
</style>
<body>
<div id="header">
<ul class="nav">
<li>
<a href="#" target="_blank">网站首页</a>
</li>
<li>
<a href="#" target="_blank">公司简介</a>
</li>
<li>
<a href="#" target="_blank">产品类型</a>
<ul class="nav2">
<li>
<a href="#">产品1</a>
</li>
<li>
<a href="#">产品2</a>
</li>
<li>
<a href="#">产品3</a>
</li>
<li>
<a href="#">产品4</a>
</li>
</ul>
</li>
<li>
<a href="#" target="_blank">新闻中心</a>
</li>
<li>
<a href="#" target="_blank">在线招聘</a>
<ul class="nav2">
<li>
<a href="#">校园招聘</a>
</li>
<li>
<a href="#">实习生招聘</a>
</li>
<li>
<a href="#">社会招聘</a>
</li>
</ul>
</li>
<li>
<a href="#" target="_blank">联系我们</a>
<ul class="nav2">
<li>
<a href="#">客服1</a>
</li>
<li>
<a href="#">客服2</a>
</li>
<li>
<a href="#">客服3</a>
</li>
<li>
<a href="#">客服4</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
上一篇： php去除HTML标签实例