简单的单级下拉菜单实现

效果预览

这里用纯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 }

简单的单级下拉菜单实现