當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

發布時間：2025/4/5 CSS 61 豆豆

生活随笔收集整理的這篇文章主要介紹了纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文:純CSS實現下拉菜單及下拉容器等（純CSS實現導航條及導航下拉容器）

?雖然網上類似甚至相同的案例有很多，但是我還是寫下，以記下筆記，也可供大家參考

希望大家可以指導批評~~

首先我們以列表ul li 來開始我們菜單也可以說導航條的制作：

在頁面中我們首先構建以下XHTML結構：

<body><ul id="navWrapper"><li><a href="#">Menu A</a><ul><li><a href="#">Menu A, Item 1</a></li><li><a href="#">Menu A, Item 2</a></li><li><a href="#">Menu A, Item 3</a></li><li><a href="#">Menu A, Item 4</a></li><li><a href="#">Menu A, Item 5</a></li><li><a href="#">Menu A, Item 6</a></li></ul></li><li><a href="#">Menu B</a><div id="test"><a href="#">Menu B, Item 1</a></div></li></ul><div id="banner"></div><div id="content"><p>Page content here.</p></div> </body> View Code

效果：

接著，我們來一步一步設計樣式及功能（先給每個元素加個邊框以便后續樣式設計區別）：

樣式代碼：

效果：

這樣我們就可以好區分，好設計了~~

下面去掉鏈接的下滑線和列表的“.”“。”，并且使父級的列表橫向排列，子級列表還是縱向排列，這樣才像下拉菜單嘛~~（這里是兩級列表嵌套，一個父級一個子級）

樣式代碼：

效果：

下面來隱藏子級列表和子級容器（這里子級容器是指id為test的div容器），當鼠標移動到父級列表時相對應的子級列表顯現出來，通過“?:hover ”實現，隱藏顯現通過display的“?none ”和“?block ”來實現，注意這里不用visibility的“?hidden ”和“?visible ”來實現，至于區別大家可以把相應的屬性換成visibility來看看效果，這里就不實現了

樣式代碼：

效果：

這里有一點需要注意，當不設置子級的position為“?absolute ”時，鼠標移動到父級，出現的子級會在頁面占據一定的位置，那么“?Page?content here?”將會產生移動，這是十分不好的。所以我們設置子級“?position:absolute; ”，這樣便可以使它們脫離正常的流程，不影響后面的內容位置！

再將父級位置稍微偏移下和將第一個父級下的自己列表向左偏移與父級邊框對齊，并且給第二個父級下的div容器一定的“容積”

樣式代碼：