通過html和css做出下拉導航欄的效果


 

 

  通過觀察了百度的首頁,對於更多產品一欄,覺得可以不涉及JS便可寫出下拉導航欄的效果

  1.先設計出大體的框架

  

<div class="nav">
<ul>
<li><a href="#">新聞</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">視頻</a></li>
<li><a href="#">貼吧</a></li>
<li><a href="#">登錄</a></li>
<li><a href="#">設置</a>
<ul>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li><a href="#">更多產品</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
</ul>
</div>

  2.初始化樣式,修改默認的無序列表

  

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}

 

  3.設置nav下的ul讓其浮動,使列表處於同一水平線,同時設置li,a的樣式

.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}

.nav ul li a{
color: #666;
}

 

  4.重要的一步之一,通過修改li下ul的display屬性,使其沒hover時隱藏,同時設置下拉框li的樣式,使其更加自然

.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;

}

 

  5.hover到隱藏的ul時,修改其display屬性,使其顯示,同時使用position的absolute,使其顯示自然

.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}

 

樣式全部代碼:

*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}
.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}
.nav ul li a{
color: #666;
}
.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;

}
.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}

 

 

個人覺得有幾點不足之處:

1.position的absolute屬性對自適應有影響,但又想不出有什么方法可以使其顯示正常,希望有大牛能夠解決我的疑惑。

2.當然方法不止一種,也希望有多些朋友們能夠提出其他思路,讓我學習借鑒,謝謝!

 

 

引用前請標明出處:http://www.cnblogs.com/zkhzz/ 謝謝


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM