整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
級導航
具體實現方法如下：
首先在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完成二級橫向以及豎向菜單導航制作；菜單導航是網站建設中最常用的一塊了，基本每個網站內都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個橫向導航條，然后鼠標經過橫向導航條之后，子導航顯示出來。
我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經過（hover）的效果。
1、列表標簽ul、dl（我們使用ul、dl來創建同類型的導航元素內容，通過設置css樣式來達到圖片所示效果）；
2、浮動元素float（每個導航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；
3、絕對定位absolute（對于子導航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據元素空間）
4、鼠標經過hover（使用css的鼠標經過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現子菜單的顯示與隱藏）
具體的實現html代碼以及css代碼就如下圖所示：
還有一個縱向菜單導航原理跟橫向的類似，只需簡單調整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實現圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
何簡潔實現電商網站常用的二級菜單顯示特色產品？這是一個廣泛的東西，哪家和哪家的都不一樣，所以說出一個標準答案，似乎不太可能。主要是看需求吧。
前2天，接一個私活，要求在產品下拉菜單中實現二級菜單的特色產品，我不知道這樣說，是不是說清楚了，簡單些，就是當鼠標移動到一級菜單時，顯示二級菜單，鼠標移到二級菜單選項時，在二級菜單的右側出現特色產品的縮略圖和名稱。
本人理工男，語言表達差，請諒解，還是看效果圖吧：
二級菜單顯示特色圖片
大家把下拉菜單理解為公司產品，把第一個。。。第5個，理解為產品系列，而雪山飛狐中的人物頭像就想想成一個個活生生的產品，就可以了。
下面開始說是如何實現的。
一、HTML結構：
如圖：
html結構1
HTML結構2
HTML結構完成
二、書寫css樣式：
css樣式
css樣式2
css樣式3
css樣式4,完結
三、jquery代碼：
jquery代碼
PS：需要注意的2點：
1、不要忘記引入jquery庫呀。
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
2、注意hover的對象：
<!-- css書寫必須為li:hover否則的話，二級菜單出不來。 -->
如果哪位需要代碼文件的話，請在評論區留言，我會發送給你。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
