本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導航制作；菜單導航是網站建設中最常用的一塊了，基本每個網站內都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。

由上圖我們可以看出，該圖包含一個橫向導航條，然后鼠標經過橫向導航條之后，子導航顯示出來。

1）制作頁面所用知識點

我們這里主要用到的知識點就是列表標簽（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代碼就如下圖所示：

2）縱向菜單導航

還有一個縱向菜單導航原理跟橫向的類似，只需簡單調整一下css代碼即可。

html代碼跟橫向一樣，這里就不再貼圖，具體的實現圖片效果以及css代碼就如下圖所示：

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。

每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

天來給大家分享一些導航條的設計形式，幫助大家建設營銷型網站，提升SEO優化效果。

一、網站底部橫向導航

最常見的網站導航，符合用戶瀏覽習慣，用戶進入網站之后，可第一眼看到網站導航的位置，一般位于網站的頭部部分，且占用整個網站的空間，這種導航適用于網站欄目在8-10個左右的網站。也是用戶瀏覽網站最常見的導航，可方便告知用戶網站分為哪些板塊。在導航上面加入下拉菜單，可增加網站于用戶的互動性，也可支持更多的網站鏈接，用戶可不用滾動滾動條即可直接進入網站任何一個欄目界面。

二、HTML5抽屜式導航

此類導航多見于手機網站，由于手機屏幕大小的限制，大多手機網站能夠更大范圍展示給用戶產品信息，會把網站導航設計為抽屜式導航。默認情況下是不直接顯示導航的，需要用戶點擊某個按鈕，才會動態的顯示出導航。抽屜式導航一般以豎向排列，位于網站的左側或右側，也可根據需求加入橫向二級菜單，可在有限的屏幕 內最大范圍為用戶隨時提供最全的有效連接，不必用戶來回滾動屏幕去尋找其他欄目的入口。

三、固定式側邊導航

固定式側邊導航不僅可以給人一種耳目一新的感覺，也會給用戶一種明亮干凈的網站布局，由于用戶習慣使用橫向導航，當網站采用側邊導航的時候，能夠很好的抓用用戶眼球，加之鼠標滑動效果，可更加激起用戶的點擊欲。側邊導航有足夠的空間表現自己的引導作用，大量的留白可使用戶感覺整個網站具有呼吸之處，采用優 美的設計，可更加引起用戶注意。

四、選項卡式導航

在一些特殊行業的網站上，使用常規導航會和整個網站很不搭配，比如卡通玩具類，幼兒園類網站都需要使用選項卡導航。選項卡導航可以隨意設計成任何符合網站整體效果的樣子，配合網站其他元素，提高網站視覺效果。選項卡導航相比其他導航有一個明顯的優勢：網站設計師可自由發揮自身水平，對用戶產生積極的心里效 應。

五、響應式導航

響應導航是存在于移動設備的特殊導航，采用html5+css3書寫，可根據手機不同系統，不同屏幕，不同尺寸調整導航布局結構，完美融合手機、平板的移 動設備應用，是使用移動設備訪問網站用戶獨一無二的選擇，簡潔的布局，大氣的整體感，為用戶提供更好的閱讀體驗。響應式導航的優勢在于，能夠更加符合移動設備的用戶瀏覽，用戶不必再去雙擊屏幕放大網頁，或輸入表單的時候還需來回切換輸入法，可直接通過響應式導航進行實現。

天這篇文章我們來說一下css的浮動屬性（float），給塊狀元素添加float屬性可以使其轉變為行內元素，也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

（1）float使用語法

css的float主要有3個屬性值none、left、right，默認為none；具體的使用如下所示：

float:none; （不使用浮動）

float:left; （靠左浮動）

float:right; （靠右浮動）

（2）float使用案例

我們通過案例來實際演練一下float元素的使用技巧。

1、float:left的使用練習

我們這里創建一個導航條，導航條包含首頁、關于我們、新聞中心、案例展示等欄目名稱。具體的網頁代碼以及顯示效果就如下圖所示：

由上圖可以看出默認的樣式是豎排顯示的，但是我們常見的網頁導航條都是橫排顯示的，這時候我們就可以使用float屬性來使塊狀元素轉變為行內元素，并讓居左顯示。

這里我們創建一個寬度為980px的導航條，給子元素（li）添加float的屬性并對齊進行填充（padding）以及外間距（margin）的潤色。具體的網頁代碼以及顯示效果就如下圖所示：

網頁中的顯示效果：

2、float:right的使用練習

float:right顧名思義用于元素靠右對齊，我們來看下面的一個例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。

我們再網頁中可以看到圖片已經浮動到網頁的右側中去了。

好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會出現什么問題，下邊文章我們會給大家講解如何清除float帶來的負面影響。

每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。