Simple single-level drop-down menu implementation_html/css_WEB-ITnose

Effect preview

Here is a simple single-level drop-down menu using pure CSS. The drop-down menu is displayed when the mouse moves over the menu title.

Basic idea

Show the menu when it is under the cursor, and hide it the rest of the time. This process must first be implemented by thinking of the :hover pseudo-class, but it is not possible to use the pseudo-class directly, because the menu is hidden in the normal state, and there is no way to trigger :hover. However, if the drop-down menu is hidden, there is still a menu title. The menu title is in When the cursor is under the menu, the menu will be displayed, but when the mouse moves over the menu, the drop-down menu will disappear. At this time, I thought of adding:hover to the drop-down menu to display itself, but in case my imagination is too wide, I have to do What to do with the split menu? Put it into a container at this time, use the nesting relationship of tags to write styles for the derived elements of the :hover pseudo-class of the container, and everything is done.

HTML structure

 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

The key to implementation is to write the rules with exclamation marks. Properties of the drop-down menu in two states: displayed and not displayed. At the same time, some gradients and pans were added to make the menu display more natural.

 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 }