表白网站,php7.0 wordpress 设置,可牛在线制作图片,成都软件公司前100强这里用纯CSS实现一个简单的单级下拉菜单#xff0c;鼠标划过菜单标题时显示下拉菜单。 基本思路 在菜单处于光标之下时显示菜单#xff0c;其余时候隐藏。这个过程首先得想到 :hover 伪类来实现#xff0c;但是直接的利用伪类还不行#xff0c;因为普通状态下菜单隐藏了鼠标划过菜单标题时显示下拉菜单。 基本思路 在菜单处于光标之下时显示菜单其余时候隐藏。这个过程首先得想到 :hover 伪类来实现但是直接的利用伪类还不行因为普通状态下菜单隐藏了没办法触发 :hover 不过下拉菜单隐藏了不是还有菜单标题么菜单标题处于光标之下时显示菜单就能够显示出来了但是鼠标移到菜单上的时候下拉菜单又会消失这个时候想到给下拉菜单也加上 :hover 显示自身但是万一脑洞大开要做分体菜单怎么办这个时候把它放进一个容器呗利用标签的嵌套关系去给容器的 :hover 伪类的派生元素写样式就一切搞定啦。 上HTML结构 1 ul iddropdown-wrapper 2 li 3 spanRewrite/span 4 ul classdropdown-sublist 5 liKotarou/li 6 liKotori/li 7 liAkane/li 8 liKagari/li 9 liLucia/li 10 liShizuru/li 11 liChihaya/li 12 /ul 13 /li 14 li 15 spanClannad/span 16 ul classdropdown-sublist 17 liTomoya/li 18 liNagisa/li 19 liUshio/li 20 liRyou/li 21 liKyou/li 22 liYukine/li 23 liFuko/li 24 liTomoyo/li 25 liKotomi/li 26 /ul 27 /li 28 li 29 spanAir/span 30 ul classdropdown-sublist 31 liYukito/li 32 liMisuzu/li 33 liKano/li 34 liMinagi/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 ulli{ 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 ulli:hover{ 91 background:rgb(0,173,238); 92 color:#eee; 93 } 转载于:https://www.cnblogs.com/aobingyan/p/3855245.html
