如何僅使用 CSS 建立水平下拉式選單？

純粹使用CSS 創建水平下拉選單

水平下拉選單允許使用者將滑鼠懸停在主導航上，從而提供易於導航的體驗選單項目顯示子選單。純粹使用 CSS 實現此效果需要一定的樣式設計能力。

HTML 結構：

先使用

建立無序列表 (

)每個選單項目的元素。子選單由嵌套的
表示。

CSS 樣式：

• 定位： 設定外部
  元素。若要顯示為區塊的元素並向
  • 新增向左浮動元素來建立水平佈局。
  • 子選單可見性： 最初，透過將子選單的顯示設為無來隱藏子選單。

  • 選單項目樣式：

    • 定義背景顏色、填滿、選單項目的文字顏色和邊框。

  • 懸停效果：

    • 在選單停留時加入背景顏色變更項目。
    • 透過將子選單的顯示設為阻止並定位它們來取消隱藏懸停時的子選單絕對。

  • 響應式子選單：

    • 減少懸停時子選單項目的字體大小以方便使用可使用可使用可使用可使用可使用可使用可使用可使用可使用可使用可使用可使用可使用可使用的單單式功能讀性。
    • 為子選單項目新增背景顏色變更懸停。

  範例程式碼：

  現場示範：
  

  現場示範：

以上是如何僅使用 CSS 建立水平下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！