纯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效果：
接著，我們來一步一步設計樣式及功能（先給每個元素加個邊框以便后續樣式設計區別）：
樣式代碼：
<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;} </style> View Code效果：
?
這樣我們就可以好區分，好設計了~~
下面去掉鏈接的下滑線和列表的“.”“。”，并且使父級的列表橫向排列，子級列表還是縱向排列，這樣才像下拉菜單嘛~~（這里是兩級列表嵌套，一個父級一個子級）
樣式代碼：
<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;}ul#navWrapper li ul li{float:none;}div#banner{clear:both;} </style> View Code效果：
下面來隱藏子級列表和子級容器（這里子級容器是指id為test的div容器），當鼠標移動到父級列表時相對應的子級列表顯現出來，通過“?:hover ”實現，隱藏顯現通過display的“?none ”和“?block ”來實現，注意這里不用visibility的“?hidden ”和“?visible ”來實現，至于區別大家可以把相應的屬性換成visibility來看看效果，這里就不實現了
樣式代碼：
<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;}ul#navWrapper li ul li{float:none;}div#banner{clear:both;}ul#navWrapper ul,ul#navWrapper div#test{display:none;position:absolute;}ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{display:block;} </style> View Code效果：
這里有一點需要注意，當不設置子級的position為“?absolute ”時，鼠標移動到父級，出現的子級會在頁面占據一定的位置，那么“?Page?content here?”將會產生移動，這是十分不好的。所以我們設置子級“?position:absolute; ”，這樣便可以使它們脫離正常的流程，不影響后面的內容位置！
再將父級位置稍微偏移下和將第一個父級下的自己列表向左偏移與父級邊框對齊，并且給第二個父級下的div容器一定的“容積”
樣式代碼：
<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;}ul#navWrapper li ul li{float:none;margin-left:-41px;}div#banner{clear:both;height:50px;margin-top:30px;}ul#navWrapper ul,ul#navWrapper div#test{display:none;position:absolute;}ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{display:block;}ul#navWrapper{margin-left:-41px;}ul#navWrapper div#test{height:200px;width:600px;background:lightgray;} </style> View Code效果：
將所有邊框去掉后這里最基本的結構就設計好了，其他的樣式可以隨意調整啦~~
?
比如：
將所有邊框去掉后，并對整體進行下設計
樣式代碼：
<style>body,div,ul,li{padding:0;margin:0;} a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;height:45px;line-height:45px;}ul#navWrapper li ul li{float:none;}div#banner{clear:both;height:50px;margin-top:50px;margin-left:50px;}div#content{margin-left:50px;}ul#navWrapper ul{display:none;position:absolute;background:#CCC;}ul#navWrapper div#test{display:none;position:absolute;height:200px;width:600px;background:#cde6c7;}ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{display:block;}ul#navWrapper{background:#CCC;height:45px;width:960px;margin:0 auto;margin-top:30px;}li a{font-size:24px;color:#333;display:block;height:45px;padding:0 20px;}li a:hover{color:#fff;background:#000;} </style> View Code效果：
圖一：
? 圖二：
?OK！這就是在以上基本結構上設計的一個例子了。如果還需要設計，只需要在以上最基本結構上設計就行了~~
?
參考文獻：微軟官方文檔“如何創建CSS下拉菜單”
?
總結
以上是生活随笔為你收集整理的纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用nodejs搭建最简单、轻量化的htt
- 下一篇： CSS中background-posit