简单的单级下拉菜单实现_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      Clannad 16      17          Tomoya 18          Nagisa 19          Ushio 20          Ryou 21          Kyou 22          Yukine 23          Fuko 24          Tomoyo 25          Kotomi 26      27  28  29      Air 30      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 } 

查看更多关于简单的单级下拉菜单实现_html/css_WEB-ITnose的详细内容...