簡單的CSS 下拉導航菜單實現代碼

2024-07-11 08:26:59

字體：大中小

來源：轉載

供稿：網友

效果圖:

首先,我們來給這個下拉菜單寫一個HTML的代碼.先創建一個div來做為容器,然后把這個導航菜單放到這個內器里.正如下面的代碼,我們用無序列表來創建這個導航菜單.在這個導航菜單中Portfolio項下有一個子菜單,我用粗體表示出來,最后說一句別忘了關閉</li>(可以看這個:css技巧-清除多余的標簽讓代碼更加有意義)
HTML代碼

復制代碼

代碼如下:
<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photos</a></li>
</ul>
</li>
<li><a href="#">Contact Me</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;
}

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

上一篇：CSS 超出隱藏實現限制字數的功能代碼(多瀏覽器)

下一篇：css的核心內容標準流、盒子模型、浮動、定位等分析