整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
級導航
具體實現方法如下：
首先在html中寫出一級菜單列表，然后在每個一級菜單中再嵌套一個列表即可創建一個二級菜單。
index.html
<div class="menu">
<ul>
<li><a href="">一級菜單</a>
<ul>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
</ul>
</li>
<li><a href="">一級菜單</a>
<ul>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
</ul>
</li>
<li><a href="">一級菜單</a>
<ul>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
<li><a href="">二級菜單</a></li>
</ul>
</li>
</ul>
</div>接著寫樣式文件，主要是對列表樣式和位置進行修改
<style>
* {
padding: 0;/*內邊距:分別左,上,右,下都為0,這樣就不會出現左右上下內間距*/
margin: 0/*外邊距:分別左,上,右,下都為0,這樣就不會出現左右上下間距*/
}
.menu ul li {
list-style: none;/*列表樣式*/
background-color: burlywood;/*背景顏色*/
width: 120px;/*寬度*/
text-align: center;/*文本對齊:居中*/
height: 40px;/*高度*/
position: relative/*定位:一般用這個就可以絕對定位*/
}
.menu ul li a {
text-decoration: none;/*超鏈接下劃線:無*/
display: block;/*顯示:正常顯示用block,隱藏none*/
line-height: 40px
}
.menu ul li:hover {
background-color: aqua
}
.menu ul li ul {
display: none;
position: absolute;
left: 120px;
top: 0
}
.menu ul li:hover ul {
display: block
}
</style>這里需要注意的是一級菜單列表的定位方式要設置為relative,二級菜單列表的定位方式要設置為absolute，這樣二級菜單才會在一級菜單相對的位置出現。
然后通過display這個屬性控制二級菜單的顯示和隱藏就可以了。
下一個文章：輪播圖
合一些常用的實用導航菜單效果展示給小伙伴們，希望對大家有幫助！
每個導航文字下面的下劃線會隨著鼠標的移上由左到右緩慢的過渡
實現該效果的方法如下
首先是html布局：
css樣式：
圖1
一、開始吧，我們先做一個盒子drop，它以后要裝的是按鈕和下拉列表。
圖2
二、在盒子drop里面做一個按鈕dropbt。
圖3
圖4
三、按鈕有點丑了，于是我們給按鈕加點樣式。
圖5
圖6
四、下面我們做出下拉列表，它們是一串鏈接，我們用一個盒子dropbox裝著。
圖7
圖8
五、列表是橫著的，而且不怎么好看，我們先改超鏈接a的樣式。
圖9
圖10
六、菜單列表好看許多了，我們給列表盒子dropbox加點樣式，比如陰影。
圖11
圖12
七、再好看的菜單列表一開始也是要先隱藏的。
圖13
圖14
八、我們讓鼠標移到按鈕上時，按鈕顏色變淺。
圖15
圖16
九、現在可以設置點擊后，下拉菜單出現了。
圖17
圖18
十、下拉菜單出現了，但你會發現鼠標在右側時，菜單也會彈出來，我們改一下樣式，解決這個問題，再次移過去的時候，你會發現只有在按鈕位置才會彈出菜單了。
圖19
十一、完善一下，當鼠標移動菜單列表時，背景色改變。
圖20
圖21
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
