简单的单级下拉菜单实现_html/css_WEB-ITnose

效果预览

这里用纯css实现一个简单的单级下拉菜单，鼠标划过菜单标题时显示下拉菜单。

基本思路

在菜单处于光标之下时显示菜单，其余时候隐藏。这个过程首先得想到 :hover 伪类来实现，但是直接的利用伪类还不行，因为普通状态下菜单隐藏了，没办法触发 :hover ，不过下拉菜单隐藏了不是还有菜单标题么，菜单标题处于光标之下时显示菜单就能够显示出来了，但是鼠标移到菜单上的时候下拉菜单又会消失，这个时候想到给下拉菜单也加上 :hover 显示自身，但是万一脑洞大开，要做分体菜单怎么办，这个时候把它放进一个容器呗，利用标签的嵌套关系，去给容器的 :hover 伪类的派生元素写样式就一切搞定啦。

上HTML结构

 1 
 2 
 3     Rewrite 4     
 5         
Kotarou
 6         
Kotori
 7         
Akane
 8         
Kagari
 9         
Lucia
10         
Shizuru
11         
Chihaya
12     
13 
14 
15     Clannad16     
17         
Tomoya
18         
Nagisa
19         
Ushio
20         
Ryou
21         
Kyou
22         
Yukine
23         
Fuko
24         
Tomoyo
25         
Kotomi
26     
27 
28 
29     Air30     
31         
Yukito
32         
Misuzu
33         
Kano
34         
Minagi
35     
36 
37 

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 }