html簡單的二級菜單制作

級導航

具體實現(xiàn)方法如下：

首先在html中寫出一級菜單列表，然后在每個一級菜單中再嵌套一個列表即可創(chuàng)建一個二級菜單。

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,這樣就不會出現(xiàn)左右上下內間距*/
		margin: 0/*外邊距:分別左,上,右,下都為0,這樣就不會出現(xiàn)左右上下間距*/
	}
	
	.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，這樣二級菜單才會在一級菜單相對的位置出現(xiàn)。

然后通過display這個屬性控制二級菜單的顯示和隱藏就可以了。

下一個文章：輪播圖

合一些常用的實用導航菜單效果展示給小伙伴們，希望對大家有幫助！

每個導航文字下面的下劃線會隨著鼠標的移上由左到右緩慢的過渡

實現(xiàn)該效果的方法如下

首先是html布局：

css樣式：

們先看一下最終效果。

圖1

一、開始吧，我們先做一個盒子drop，它以后要裝的是按鈕和下拉列表。

圖2

二、在盒子drop里面做一個按鈕dropbt。

圖3

圖4

三、按鈕有點丑了，于是我們給按鈕加點樣式。

圖5

圖6

四、下面我們做出下拉列表，它們是一串鏈接，我們用一個盒子dropbox裝著。

圖7

圖8

五、列表是橫著的，而且不怎么好看，我們先改超鏈接a的樣式。

圖9

圖10

六、菜單列表好看許多了，我們給列表盒子dropbox加點樣式，比如陰影。

圖11

圖12

七、再好看的菜單列表一開始也是要先隱藏的。

圖13

圖14

八、我們讓鼠標移到按鈕上時，按鈕顏色變淺。

圖15

圖16

九、現(xiàn)在可以設置點擊后，下拉菜單出現(xiàn)了。

圖17

圖18

十、下拉菜單出現(xiàn)了，但你會發(fā)現(xiàn)鼠標在右側時，菜單也會彈出來，我們改一下樣式，解決這個問題，再次移過去的時候，你會發(fā)現(xiàn)只有在按鈕位置才會彈出菜單了。

圖19

十一、完善一下，當鼠標移動菜單列表時，背景色改變。

圖20

圖21

在線咨詢

上一篇：「原創(chuàng)」用Htmlhelp Workshop制作Windows 幫助文件
下一篇：HTML DOM Style 對象

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

html簡單的二級菜單制作

您的項目需求