简单的单级下拉菜单实现_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 }