這里用純CSS實現一個簡單的單級下拉菜單，鼠標劃過菜單標題時顯示下拉菜單。

基本思路

在菜單處于光標之下時顯示菜單，其余時候隱藏。這個過程首先得想到 :hover 偽類來實現，但是直接的利用偽類還不行，因為普通狀態下菜單隱藏了，沒辦法觸發 :hover ，不過下拉菜單隱藏了不是還有菜單標題么，菜單標題處于光標之下時顯示菜單就能夠顯示出來了，但是鼠標移到菜單上的時候下拉菜單又會消失，這個時候想到給下拉菜單也加上 :hover 顯示自身，但是萬一腦洞大開，要做分體菜單怎么辦，這個時候把它放進一個容器唄，利用標簽的嵌套關系，去給容器的 :hover 偽類的派生元素寫樣式就一切搞定啦。

上HTML結構

1 <ul id="dropdown-wrapper"> 2 <li> 3 <span>Rewrite</span> 4 <ul class="dropdown-sublist"> 5 <li>Kotarou</li> 6 <li>Kotori</li> 7 <li>Akane</li> 8 <li>Kagari</li> 9 <li>Lucia</li> 10 <li>Shizuru</li> 11 <li>Chihaya</li> 12 </ul> 13 </li> 14 <li> 15 <span>Clannad</span> 16 <ul class="dropdown-sublist"> 17 <li>Tomoya</li> 18 <li>Nagisa</li> 19 <li>Ushio</li> 20 <li>Ryou</li> 21 <li>Kyou</li> 22 <li>Yukine</li> 23 <li>Fuko</li> 24 <li>Tomoyo</li> 25 <li>Kotomi</li> 26 </ul> 27 </li> 28 <li> 29 <span>Air</span> 30 <ul class="dropdown-sublist"> 31 <li>Yukito</li> 32 <li>Misuzu</li> 33 <li>Kano</li> 34 <li>Minagi</li> 35 </ul> 36 </li> 37 </ul>

?

CSS

實現的關鍵就在那些打驚嘆號的規則,寫好顯示與不顯示時兩個狀態的下拉菜單的屬性。同時添加了一些漸變以及平移讓菜單顯示更加自然。

1 body{ margin:0; padding:0; 2 3 font-size:18px; 4 5 background-color:#aaa; 6 } 7 h1{margin:2em 0.4em 0 0.4em;color:#eee;font-size:3em;} 8 #dropdown-wrapper{ 9 display:block; 10 11 margin:4em 1em 0 1em; 12 } 13 #dropdown-wrapper li{ 14 /*！！！！！！！！！！！！*/ 15 display:inline-table; 16 padding:0; 17 margin:0; 18 19 position:relative; 20 21 width:10em; 22 23 background:#fff; 24 25 -webkit-transition:all ease-in-out 0.3s; 26 transition:all ease-in-out 0.3s; 27 } 28 #dropdown-wrapper span{ 29 display:block; 30 padding:0.4em 1em; 31 width:10em; 32 color:#333; 33 } 34 #dropdown-wrapper span:after{ 35 display:inline-block; 36 float:right; 37 content:">"; 38 39 -webkit-transform:rotate(0deg); 40 transform:rotate(0deg);/*為了漸變*/ 41 42 -webkit-transition:all ease-in-out 0.3s; 43 transition:all ease-in-out 0.3s; 44 } 45 #dropdown-wrapper li:hover span:after{ 46 -webkit-transform:rotate(90deg); 47 transform:rotate(90deg);/*劃過的時候那個右箭頭旋轉90度，變成朝下的啦*/ 48 } 49 #dropdown-wrapper li ul{ 50 /*！！！！！！！！！！！！*/ 51 display:block; 52 position:absolute; 53 54 padding:0; 55 margin:0; 56 57 height:0;/*平時的時候隱藏下拉列表*/ 58 line-height:0;/*0行高，這個的作用是用來制造一個文字展開的效果*/ 59 overflow:hidden; 60 61 color:#555; 62 63 opacity:0; 64 65 -webkit-transform:translateY(-1em); 66 transform: translateY(-1em); 67 68 -webkit-transition:all ease-in-out 0.3s; 69 transition:all ease-in-out 0.3s; 70 } 71 #dropdown-wrapper li ul>li{ 72 padding:0.7em 1em; 73 74 } 75 #dropdown-wrapper li:hover ul{ 76 /*！！！！！！！！！！！！*/ 77 /*這是容器處于光標下時的下拉列表的狀態， 78 *這個時候就是要做的就是顯示下拉菜單咯 79 */ 80 opacity:1; 81 height:auto; 82 line-height:1em; 83 84 -webkit-transform: translaY(0); 85 transform: translateY(0); 86 } 87 #dropdown-wrapper li:hover span{ 88 color:rgb(0,173,238); 89 } 90 #dropdown-wrapper li:hover ul>li:hover{ 91 background:rgb(0,173,238); 92 color:#eee; 93 }

轉載于:https://www.cnblogs.com/aobingyan/p/3855245.html

總結

以上是生活随笔為你收集整理的简单的单级下拉菜单实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。