自適應(yīng)導(dǎo)航欄
HTML
<div class="header">
<div class="logo">logo</div>
<div class="rightTitle">
<ul>
<li>首頁</li>
<li class="hover">
新聞
<ul class="hoverTitle">
<li>國內(nèi)動態(tài)</li>
<li>國外動態(tài)</li>
</ul>
</li>
<li>公司介紹</li>
<li class="hover1">
招攬人才
<ul class="hoverTitle1">
<li>社會人才</li>
<li>學(xué)校人才</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布局使導(dǎo)航標(biāo)簽橫向排布*/
}
ul{
list-style: none; /*去掉前面的圓點*/
margin: 0px; /*ul 默認(rèn)margin-left:40px;*/
padding: 0px; /* 默認(rèn)padding-left: 40px;*/
display: flex; /*flex布局使導(dǎo)航標(biāo)簽橫向排布*/
}
li{
cursor: pointer;
padding: 0 20px;
}
.hoverTitle,.hoverTitle1{ /* 懸掛導(dǎo)航首先隱藏*/
display: none;
}
.hoverTitle li,.hoverTitle1 li{
padding: 0;
}
.hover:hover .hoverTitle{ /*鼠標(biāo)懸浮顯示*/
display: block;
}
.hover1:hover .hoverTitle1{
display: block;
}
.hover{
position: relative;
}
.hoverTitle{ /*當(dāng)下面標(biāo)簽較寬時如此處理可以防止上面的標(biāo)簽跑動*/
position: absolute;
top: 60px;
width: 200%;
}
