Create a CSS cascade drop-down menu

Introduction: This is a detailed page for making CSS cascading drop-down menus. It introduces PHP, related knowledge, skills, experience, and some PHP source code.

Class = 'pingjiaf' frameborder = '0' src = 'HTTP: // biancheng.dnbc?info/pingjia.php? Id = 362690 'rolling = 'no'>

---------------------------------
Create a CSS cascade drop-down menu
---------------------------------
Related downloads:
Source -- http://www.kuaipan.cn/file/id_22624530505662765.html
Preparation: none.
---------------------------------
Personal blog: www.jett23.com
Email Address: webmaster [at] jett23.com
---------------------------------

1. Drop-down menu prototypeCode(In actual development, we use # navigation Li a to define CSS layout styles, rather than ul Li, so you need to set the UL tag id value in the yellow tag! )
<Ul>
<Li> <a href = "#"> menu 1 </a> </LI>
<Li> <a href = "#"> menu 2 </a>
<Ul>
<Li> <a href = "#"> sub-menu 1 </a> </LI>
<Li> <a href = "#"> sub-Menu 2 </a> </LI>
<Li> <a href = "#"> sub-menu 3 </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> menu 3 </a> </LI>
<Li> <a href = "#"> menu 4 </a>
<Ul>
<Li> <a href = "#"> sub-menu 1 </a> </LI>
<Li> <a href = "#"> sub-Menu 2 </a> </LI>
<Li> <a href = "#"> sub-menu 3 </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> menu 5 </a> </LI>
</Ul>

2. prototype of the drop-down menu: the UL border filling value is set to 0 (compatibility !); Level 1 menu list items (list symbol none, length 100 width 30px, left floating, display inline, font 14px)
ul {
margin: 0px;
padding: 0px;
}< br> ul Li {
list-style-type: none;
Height: 30px;
width: 100px;
float: Left;
font-size: 14px;
display: inline;
}

3.Drop-down menu link style (key code): (modify underline none, color white, line height 29px, background color blue, display block, left fill 10px, Right Bottom Frame 1px solid # CCC)
Ul Li {
Text-Decoration: none;
Color: # ffffff;
Background-color: #006699;
Display: block;
Line-Height: 29px;
Padding-left: 10px;
Border-bottom: 1px solid # CCC;
Border-Right: 1px solid # CCC;
}

4.Drop-down menu hover link style (change the background color: Level 1 menu gray, sub menu dark blue ).
Ul Li A: hover {
Background-color: #333333;
}
Ul Li ul Li A: hover {
Background-color: # 00527d;
}

5.So far, we still need the last step.
The sub-menu is displayed only when you move the cursor over the top-level menu (key code: yellow logo ).
Ul Li ul {
Visibility: hidden;
}
Ul Li: hover ul {
Visibility: visible;
}

Love J2EE follow Java Michael Jackson video station JSON online tools

Http://biancheng.dnbcw.info/php/362690.html pageno: 1.