自适应导航栏
HTML
<div class="header">
<div class="logo">logo</div>
<div class="rightTitle">
<ul>
<li>首页</li>
<li class="hover">
新闻
<ul class="hoverTitle">
<li>国内动态</li>
<li>国外动态</li>
</ul>
</li>
<li>公司介绍</li>
<li class="hover1">
招揽人才
<ul class="hoverTitle1">
<li>社会人才</li>
<li>学校人才</li>
</ul>
</li>
<li>登录</li>
</ul>
</div>
</div>
css
.header{
height: 60px;
display: fixed;
background-color: skyblue;
padding: 0 50px;
line-height: 60px;
}
.logo{
display: inline-block;
width: 50px;
color: red;
}
.rightTitle{
float: right;
/*display: flex; flex布局使导航标签横向排布*/
}
ul{
list-style: none; /*去掉前面的圆点*/
margin: 0px; /*ul 默认margin-left:40px;*/
padding: 0px; /* 默认padding-left: 40px;*/
display: flex; /*flex布局使导航标签横向排布*/
}
li{
cursor: pointer;
padding: 0 20px;
}
.hoverTitle,.hoverTitle1{ /* 悬挂导航首先隐藏*/
display: none;
}
.hoverTitle li,.hoverTitle1 li{
padding: 0;
}
.hover:hover .hoverTitle{ /*鼠标悬浮显示*/
display: block;
}
.hover1:hover .hoverTitle1{
display: block;
}
.hover{
position: relative;
}
.hoverTitle{ /*当下面标签较宽时如此处理可以防止上面的标签跑动*/
position: absolute;
top: 60px;
width: 200%;
}