如何使用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;聲明必須添加到相對位置定位的列表中。
