CSS縱向導航選單通常是指放置在網頁左側或右側的從上至下排列的一種導航形式。縱向導航選單的使用也較為常見，如淘寶網的淘寶服務。
我現在詳細教你如何製作垂直導航。
工具/原料
電腦
DW軟體
方法/步驟
開啟Adobe Dreamweaver CC 2015。
執行選單欄中的"檔案>新建"命令或按住Ctrl+N鍵開啟"新建文件"對話方塊，選擇其文件型別為HTML，單擊"建立"按鈕，即建立一個網頁文件。
和之間新增"
"，如下圖所示。【解釋】DIV元素是用來為HTML文件內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。DIV標籤稱為區隔標記。作用：設定字、畫、表格等的擺放位置。
id屬性：規定元素的唯一 id，通過 CSS 為帶有指定 id 的元素改變或新增樣式。
【基本語法】
【功能說明】div元素為包含型的DIV塊元素，可以設定放置在其"標籤內容"中的元素（例如對齊方式），若是加上id、class等屬性，則可設定任意範圍的樣式。
在HTML、XHTML檔案中開始標籤與結束標籤都不可省略。
全部商品分類
"，如下圖所示。【基本語法】
【語法說明】
1.標題標記本身具有換行的作用，標題總是從新的一行開始；
2.#用來指定標題文字的大小，#取1~6的整數值，取1時文字最大；取6時文字最小。
和之間新增"
【基本語法】
-
....
【語法說明】
在HTML檔案中，可以利用成對的
-
和
基本語法】
- ....
- ....
- ....
- ....
.....
【語法說明】
列表項標記
用來定義列表項序列。
和之間新增""，如下圖所示。
【基本語法】
【語法說明】
之間新增"body{font-family:Verdana; font-size:12px; line-height:1.5;} a{color:#000; text-decoration:none;} a:hover{color:#F00;} #menu{width:100px; border:1px solid #ccc;} #menu ul{list-style:none; margin:0px; padding:0px;} #menu ul li{background:#eee; padding:0px 8px; height:26px; line-height:26px; border-bottom:1px solid #ccc;}
"，如下圖所示。
font-family屬性：指定字體系列。
font-size屬性：設定字型大小。
line-height屬性：設定行間的距離(行高)。
border屬性：規定影象周圍的邊框的寬度，就是說可以增加或去掉影象的邊框。
height屬性：設定高度。
background屬性：設定背景色。
list-style屬性：設定列表樣式。
margin屬性：設定邊框外的距離。
float屬性：定義元素在哪個方向浮動。
padding屬性：設定邊框內的距離。
#menu：對應於頁面中id為menu的元素
#menu ul：對應於頁面中id為menu的元素裡的
-
無序列表。
- 列表專案。
【重點】
a:link 未連結時的超連結文字的樣式。
a:visited 已連結過的超連結文字的樣式。
a:active 當滑鼠單擊超連結後，超連結文字所顯示的樣式。
a:hover 當滑鼠移動超連結文字上方時，超連結文字所顯示的樣式。
a 在此屬性內設定樣式時，則上述4種屬性將同時引用此值。
【基本語法】border-bottom：下邊框寬度 下邊框樣式 下邊框顏色
【功能說明】設定下邊框的樣式、寬度和顏色。
儲存網頁檔案，按住F12鍵可以在瀏覽器中預覽效果，如下圖所示。
#menu ul li：對應於頁面中id為menu的元素裡
-
無序列表裡面的