Simple Single-level drop-down menu implementation, level drop-down menu

Simple Single-level drop-down menu implementation, level drop-down menu
Effect Preview

Here, a simple single-level drop-down menu is implemented with pure CSS. The drop-down menu is displayed when you move the mouse over the menu title.

Basic Ideas

When the menu is under the cursor, the menu is displayed and hidden in other cases. This process must first come to mind: HoverPseudo-class implementation, but the direct use of pseudo-class is not enough, because the menu is hidden in the normal state, there is no way to trigger: HoverBut the drop-down menu hides the menu title. When the menu title is under the cursor, the displayed menu will be displayed, but the drop-down menu will disappear when you move the mouse over the menu, in this case, add the drop-down menu: HoverDisplay itself, but what should I do if the brain hole is wide open? In this case, put it into a container and use the nested relationship of labels to give the container: HoverWriting styles to derived elements of pseudo classes is all done.

Upper 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 properties of the drop-down menus in two states: Display and not display in those exclamation point rules. At the same time, some gradient and translation are 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 records-in-out 0.3 s; 26 transition: all records-in-out 0.3 s; 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-transf Orm: rotate (0deg); 40 transform: rotate (0deg);/* For gradient */41 42-webkit-transition: all gradient-in-out 0.3 s; 43 transition: all records-in-out 0.3 s; 44} 45 # dropdown-wrapper li: hover span: after {46-webkit-transform: rotate (90deg); 47 transform: rotate (90deg);/* The right arrow rotates 90 degrees when it is crossed, it turns down */48} 49 # dropdown-wrapper li ul {50 /*!!!!!!!!!!!! */51 display: block; 52 position: absolute; 53 54 padding: 0; 55 margin: 0; 56 57 height: 0; /* Hide the drop-down list at ordinary times */58 line-height: 0;/* 0 rows high, which is used to create a text expansion effect */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 records-in-out 0.3 s; 69 transition: all records-in-out 0.3 s; 70} 71 # dropdown-wrapper li ul> li {72 padding: 0.7em 1em; 73 74} 75 # dropdown-wrapper li: hover ul {76 /*!!!!!!!!!!!! */77/* This is the drop-down list when the container is under the cursor. 78 * all you need to do is to display the drop-down menu. 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}

Help me write a simple drop-down menu code

Has been IE6, opera test, copy the following code paste to the local file, change the suffix to .html, double-click to see the effect, runtime to be able to access the Internet, unless you download the jquery-1.5.2.min.js to the local

<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Script type = "text/javascript" src = "code.jquery.com/jquery-1.5.2.min.js"> </script>
</Head>
<Style>
Body {background: #000; margin: 0; padding: 0 ;}
Ul, li, hr {margin: 0; padding: 0; float: left; list-style: none ;}
A {font-size: 12px; font-weight: normal; font-family: ""; color: #999; text-decoration: none; text-

Align: center ;}
A: hover {color: orange ;}
# Nav {height: 32px; background: # eee; width: 100% ;}
# Nav a, # nav a. hover {width: 88px; height: 32px; float: left; color: #444; font: 12px; font-weight: bold; font

-Family: tahoma; text-decoration: none; line-height: 32px; text-align: center; display: block; border-

Right: 1px solid # f5f2f0; border-left: 1px solid # e0e0e0 ;}
# Nav a: hover, # nav a. hover {background: orange; color: # fff ;}

Hr {width: 100%; height: 0px; border: none; border-top: 1px solid # fff; overflow: hidden; font-

Size: 1px; display: block; clear: both;
Line-height: 1px ;}
* Html hr {margin-bottom:-14px ;}
Hr. h1 {border-color: #777 ;}
Hr. h2 {border-color: #555 ;}
Hr. h3 {border-color: #333 ;}

# Cbox {position: absolute; top: 32px; left: 0 ;}
# Cbox ul {width: 150px; background: #333; position: absolute; display: none ;}
# Cbox ul li {display: block ;}
# Cbox ul ...... remaining full text>

The CSS code of the simple three-level drop-down menu should have DIV

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> three-level dropdown menu </title>
<Style type = "text/css">
/* Common styling */
. Menu {font-family: arial, sans-serif; width: 750px; position: relative; margin: 0; font-size: 11px; margin: 50px 0 ;}
. Menu ul li ,. menu ul li a: visited {display: block; text-decoration: none; color: #000; width: pixel; height: 20px; text-align: center; color: # fff; border: 1px solid # fff; background: #710069; line-height: 20px; font-size: 11px; overflow: hidden ;}
. Menu ul {padding: 0; margin: 0; list-style-type: none ;}
. Menu ul li {float: left; margin-right: 1px; position: relative ;}
. Menu ul li ul {display: none ;}
/* Specific to non IE browsers */
. Menu ul li: hover a {color: # fff; background: # 36f ;}
. Menu ul li: hover ul {display: block; position: absolute; top: 21px; left: 0; width: 105px ;}
. Menu ul li: hover ul li a. hide {background: #6a3; color: # fff ;}
. Menu ul li: hover a. hide {background: # 6fc; color: #000 ;}
. Menu ul li: hover ul li ul {display: none ;}
. Menu ul li: hover ul li a {display: block; background: # ddd; color: #000 ;}
. Menu ul li: hover ul li a: hover {background: # 6fc; color: #000 ;}
. Menu ul ...... remaining full text>