首頁 > 開發者 > JavaScript
純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效果：
接著，我們來一步一步設計樣式及功能（先給每個元素加個邊框以便後續樣式設計區別）：
樣式代碼：
<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下拉式功能表”
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
