如何使用HTML和CSS製作下拉選單

目錄

方法1：HTML1、創建CSS選單的HTML代碼框架。2、在主選單區域中添加連結。3、在"關於我們（About Us）"下方LI標籤內添加一個無序列表，它代表其子選單的連結。4、在HTML代碼中添加樣式表連結。方法2：CSS1、創建CSS檔案。2、使用CSS樣式表顯示主選單。3、設定鼠標懸停時的字型漸變顏色。4、使用樣式表顯示子選單。5、定位下拉選單，並將選單項對齊。下拉選單可以在頁面上分級顯示不同類別的項目。如果用戶將鼠標懸停在選單項上，選單項下會顯示子選單項目。我們僅使用HTML和CSS代碼就可以製作這樣的選單。學習這篇指南後，你就能在示例上稍作修改，製作屬於自己的選單。此外，我們爲每個步驟提供了截圖，幫助你掌握製作選單的方法。我們先從HTML代碼開始學習，稍後再學習CSS樣式表部分內容。

方法1：HTML

1、創建CSS選單的HTML代碼框架。我們使用class="nav"屬性的‘div’標籤作爲選單的容器。在截圖中，在圖示的HTML代碼中，一個簡單的無序列表（ul）來表示主選單項。

2、在主選單區域中添加連結。在本步驟中，在無序列表（ul）每一項上添加連結。

3、在"關於我們（About Us）"下方LI標籤內添加一個無序列表，它代表其子選單的連結。

4、在HTML代碼中添加樣式表連結。目前我們已經完成了HTML代碼，其內容是一個清晰的選單和子選單的層次佈局結構。我們使用外置的CSS樣式表，因此需要在代碼的‘head’區域添加樣式表連結。

方法2：CSS

1、創建CSS檔案。完成HTML框架代碼後，我們需要使用樣式表來實現下列選單功能。我們使用CSS選擇器來定位HTML中的選單項，因此無需在HTML中添加額外的ID或class屬性。我們透過UL內嵌UL的方式來定位子選單，並使用display:none;屬性 將其隱藏。

在鼠標懸停在LI元素上時，我們需要將其轉換爲block模式，重新顯示相應的子選單，而>命令可以定位鼠標懸停位置的LI元素。

2、使用CSS樣式表顯示主選單。position:relative;聲明讓子選單根據主選單相對位置顯示。

display:inline-block;聲明可以將選單調整到合適寬度。

3、設定鼠標懸停時的字型漸變顏色。圖示中的代碼在懸停時，將連結變爲深色漸變背景和白色文字的字型

4、使用樣式表顯示子選單。當前子選單樣式繼承主選單元素。我們要讓子選單項垂直顯示在主選單項下方。

5、定位下拉選單，並將選單項對齊。這將會同時去除灰色背景。position:relative;聲明必須添加到列表項頂端。

position:absolute;聲明必須添加到相對位置定位的列表中。