建站
咨詢
售后
建站咨詢
新聞中心
導航條是一個網(wǎng)站的基礎(chǔ)，美觀易用的導航條對于任何網(wǎng)站都是非常重要的。按照傳統(tǒng)的方法，導航條是由放在一行表格單元里的圖形圖像構(gòu)成。由于人們不再推薦用表格來定位任何非表格的頁面內(nèi)容，所以很多人都用結(jié)構(gòu)化的 XHTML 標記和 CSS 格式來創(chuàng)建導航條。下面先來看一下最簡單的 CSS 導航條是怎么實現(xiàn)的：
堯都網(wǎng)站建設公司成都創(chuàng)新互聯(lián)公司,堯都網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為堯都1000多家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設公司要多少錢，請找那個售后服務好的堯都做網(wǎng)站的公司定做！
首先,我們來給這個下拉菜單寫一個 HTML 的代碼.先創(chuàng)建一個 div 來做為容器,然后把這個導航菜單放到這個容器里.正如下面的代碼,我們用無序列表來創(chuàng)建這個導航菜單.在這個導航菜單中 Portfolio 項下有一個子菜單,用粗體表示出來,別忘了關(guān)閉。
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;
}
在這一步我們給
#nav ul li {
float: left
position: relative;
}
在這一步我們給標簽設置一個樣式被它看起來像一個按扭(div css教程-如何使用css創(chuàng)建一個類似按扭的導航)
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
最重要的部分
這部分將展示給你看如何讓下拉菜單的顯示和隱藏。
當光標沒有移動到Portfolio里下拉菜單不顯示,當光標移動到Portfolio上面時下拉菜單顯示,我們用display的屬性來實現(xiàn)這個效果。
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
我們給下拉菜單的懸停狀態(tài)設置樣式
#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
實例
#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導航條素材下載
4色橫向CSS導航條菜單 點此下載
純CSS實現(xiàn)的彩色導航菜單
點此下載
左側(cè)導航布局CSS網(wǎng)頁模板
點此下載
CSS中英文雙語導航菜單
點此下載
CSS水平下拉菜單
點此下載
div css下拉導航菜單分類代碼
點此下載
五款漂亮的CSS橫向下拉菜單導航條
點此下載
分享標題：創(chuàng)新互聯(lián)CSS教程：詳細的css導航條實現(xiàn)代碼及素材下載
文章起源：http://m.5511xx.com/article/dhgijep.html
