CSS-下拉導航條

Web網站中很多時候都會出現下拉導航條，有的是通過CSS實現，有的通過JavaScript插件實現，其實CSS實現起來比較簡單,先來看一個簡版的下拉菜單:

Html代碼通過ul列表實現:

  <ul?class="nav"> 
 ???????<li>首頁</li> 
 ???????<li>產品</li> 
 ???????<li>服務 
 ???????????<ul> 
 ???????????????<li>設計</li> 
 ???????????????<li>研發</li> 
 ???????????????<li>交付</li> 
 ???????????</ul> 
 ???????</li> 
 ???????<li>關于我們 
 ???????????<ul> 
 ???????????????<li>博客園</li> 
 ???????????????<li>FlyElephant</li> 
 ???????????????<li>keso</li> 
 ???????????</ul> 
 ???????</li> 
 ???</ul> 

CSS代碼如下:

 .nav {
 ????margin-left: 200px; 
 ????margin-top:200px; 
}
.nav li {
 ????float: left; 
 ????width: 150px; 
 ????background-color: #00C5CD; 
 ????padding-top: 10px; 
 ????padding-bottom: 10px; 
 ????text-align: center; 
 ????border-right: 1px solid #fff; 
}
.nav li:last-child {
 ????border-right: none; 
}
.nav li ul {
 ????width: 150px; 
 ????position: absolute; 
 ????margin-top: 10px; 
 ????left: 9999px; 
}
.nav li ul li {
 ????background-color: #00EE00; 
 ????border-bottom: 1px solid #fff; 
}
.nav li:hover ul {
 ????left: auto; 
}

　里面很重要的一點就是在正常狀態下將需要展示的ul位置只放在屏幕之外，left:9999px,鼠標滑動上的時候將left設置為auto~

本文轉自Fly_Elephant博客園博客，原文鏈接：http://www.cnblogs.com/xiaofeixiang/p/5038552.html，如需轉載請自行聯系原作者

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/281878.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/281878.shtml
英文地址，請注明出處：http://en.pswp.cn/news/281878.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！