您當前位置：首頁 > web前端 > htmlcss > 使用CSS制作簡單的下拉菜單導航

使用CSS制作簡單的下拉菜單導航

來源：程序員人生發布時間：2013-11-18 01:04:12 閱讀次數：3571次

welcome to ximumu site.這個教程會告訴你如何創建一個簡單的CSS下拉菜單.如果你覺得好就請告訴你的一個朋友讓他也知道這個網站,木木會非常感謝的.^_^
首先,我們來給這個下拉菜單寫一個HTML的代碼.先創建一個div來做為容器,然后把這個導航菜單放到這個內器里.正如下面的代碼,我們用無序列表來創建這個導航菜單.在這個導航菜單中Portfolio項下有一個子菜單,我用粗體表示出來,最后說一句別忘了關閉</li>(可以看這個:css技巧-清除多余的標簽讓代碼更加有意義)

HTML代碼：

<div id="nav">
<ul>
<li class="borderleft"><a href="http://www.vxbq.cn" target="_blank">首頁</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">站長資訊</a>
<ul>
<li class="top"><a href="http://www.vxbq.cn" target="_blank">廠商企業</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">站長茶館</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">網站在線</a></li>
</ul>
</li>

<li><a href="http://www.vxbq.cn" target="_blank">網站運營</a>
<ul>
<li class="top"><a href="http://www.vxbq.cn" target="_blank">SEO優化</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">建站心得</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">推廣策劃</a></li>
</ul>
</li>
<li><a href="http://www.vxbq.cn" target="_blank">網站設計</a>
<ul>
<li class="top"><a href="http://www.vxbq.cn" target="_blank">Web開發</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">圖像設計</a></li>
<li><a href="http://www.vxbq.cn" target="_blank">酷站欣賞</a></li>
</ul>
</li>
<li><a href="http://bbs.liehuo.net" target="_blank">站長論壇</a></li>
</ul>
</div>

The css

首先,我們來給#nav div設置一個樣式,給它一個寬度,高度,字體大小.并把默認的無序列表樣式給去掉.

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}

在這一步我們給<li>設置左浮動讓整個導航水平.并且設置相對,記<li>成為一個祖元素,這樣我們下面就可以利用到絕對定位了.

#nav ul li {
float: left
position: relative;
}

在這一步我們給<a>標簽設置一個樣式被它看起來像一個按扭(div css教程-如何使用css創建一個類似按扭的導航)

#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}

最重要的部分

這部分將展示給你看如何讓下拉菜單的顯示和隱藏.

當光標沒有移動到WEB項里下拉菜單不顯示,當光標移動到WEB項上面時下拉菜單顯示,我們用display的屬性來實現這個效果.

#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}

我們給下拉菜單的懸停狀態設置樣式：

#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

完整的CSS：

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

最終效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-type" content="text/html;charset=GBK" /><title>使用CSS制作簡單的下拉菜單導航 - Liehuo.Net</title><style type="text/css">*{margin:0; padding: 0;}body { background:#444;}#navcont { background: #fff; width: 100%;}#nav { font-family: helvetica; position:relative; width:577px; height:56px; font-size:14px; color:#999; margin: 0 auto; }#nav ul { list-style-type:none; }#nav ul li { float:left; position: relative;}#nav ul li a { border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; text-align:center; color:#999;}#nav ul li a:hover {background: #12aeef url(images/shadow.png) repeat-x;; color:#fff;}#nav ul li ul {display: none;}#nav ul li:hover ul {display: block; position: absolute; top:56px; min-width:190px; left:0;}#nav ul li:hover ul li a {display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #f2f2f2; border-right: none;}#nav ul li:hover ul li a:hover { background:#6dc7ec; color:#ffffff; }.borderleft {border-left: 1px solid #e9e9e9;}.top { border-top: 1px solid #f2f2f2;}/* This piece of code is for a third level drop down menu and is not included in this tutorial #nav ul li:hover ul li ul {display:none;}#nav ul li:hover ul li:hover ul {display:block; position: absolute; top:-1px; left: 151px;}*//* Ignore this last piece of code */#threestyles {width:300px;margin: 0px auto;border: 2px solid #666;margin-top: 30px;padding:100px 100px 100px 100px;}</style></head><body><div id="navcont"><div id="nav"><ul><li class="borderleft"><a href="http://www.vxbq.cn" target="_blank">首頁</a></li><li><a href="http://www.vxbq.cn" target="_blank">站長資訊</a><ul><li class="top"><a href="http://www.vxbq.cn" target="_blank">廠商企業</a></li><li><a href="http://www.vxbq.cn" target="_blank">站長茶館</a></li><li><a href="http://www.vxbq.cn" target="_blank">網站在線</a></li></ul></li><li><a href="http://www.vxbq.cn" target="_blank">網站運營</a><ul><li class="top"><a href="http://www.vxbq.cn" target="_blank">SEO優化</a></li><li><a href="http://www.vxbq.cn" target="_blank">建站心得</a></li><li><a href="http://www.vxbq.cn" target="_blank">推廣策劃</a></li></ul></li><li><a href="http://www.vxbq.cn" target="_blank">網站設計</a><ul><li class="top"><a href="http://www.vxbq.cn" target="_blank">Web開發</a></li><li><a href="http://www.vxbq.cn" target="_blank">圖像設計</a></li><li><a href="http://www.vxbq.cn" target="_blank">酷站欣賞</a></li></ul></li><li><a href="http://bbs.liehuo.net" target="_blank">站長論壇</a></li></ul></div></div><div id="threestyles"><a href="http://www.vxbq.cn" target="_blank"><img src="http://www.vxbq.cn/liehuo.net/images/liehuo2009/logo.gif" border="0" /></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 MySql數據庫亂碼關鍵處理的方法與總結

下一篇 關于MySQL中的InnoDB引擎的MVCC機制的理解

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

使用CSS制作簡單的下拉菜單導航