簡單的單級(jí)下拉菜單實(shí)現(xiàn)

效果預(yù)覽

這里用純CSS實(shí)現(xiàn)一個(gè)簡單的單級(jí)下拉菜單，鼠標(biāo)劃過菜單標(biāo)題時(shí)顯示下拉菜單。

基本思路

在菜單處于光標(biāo)之下時(shí)顯示菜單，其余時(shí)候隱藏。這個(gè)過程首先得想到 :hover 偽類來實(shí)現(xiàn)，但是直接的利用偽類還不行，因?yàn)槠胀顟B(tài)下菜單隱藏了，沒辦法觸發(fā) :hover ，不過下拉菜單隱藏了不是還有菜單標(biāo)題么，菜單標(biāo)題處于光標(biāo)之下時(shí)顯示菜單就能夠顯示出來了，但是鼠標(biāo)移到菜單上的時(shí)候下拉菜單又會(huì)消失，這個(gè)時(shí)候想到給下拉菜單也加上 :hover 顯示自身，但是萬一腦洞大開，要做分體菜單怎么辦，這個(gè)時(shí)候把它放進(jìn)一個(gè)容器唄，利用標(biāo)簽的嵌套關(guān)系，去給容器的 :hover 偽類的派生元素寫樣式就一切搞定啦。

上HTML結(jié)構(gòu)

 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

實(shí)現(xiàn)的關(guān)鍵就在那些打驚嘆號(hào)的規(guī)則,寫好顯示與不顯示時(shí)兩個(gè)狀態(tài)的下拉菜單的屬性。同時(shí)添加了一些漸變以及平移讓菜單顯示更加自然。

 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);/*劃過的時(shí)候那個(gè)右箭頭旋轉(zhuǎn)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;/*平時(shí)的時(shí)候隱藏下拉列表*/58     line-height:0;/*0行高，這個(gè)的作用是用來制造一個(gè)文字展開的效果*/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     /*這是容器處于光標(biāo)下時(shí)的下拉列表的狀態(tài)，78      *這個(gè)時(shí)候就是要做的就是顯示下拉菜單咯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 }