Using CSS to make a drop-down menu

using CSS to make a drop-down menu

　　1. Define a Div, give Div an ID or class, give Div a style.

　　　　eg:<div id= "menu" ></div>

/*css

#menu {

width:1024px; //define a width for div

height:40px; //define a height for Div

margin:0 Auto; //Let Div center display

Background-color: #eee; //give div a background color

　　　　　　　　}

*/

　　2. Create the unordered list (UL) required for the drop-down menu.

Eg:<ul>

<li><a href= "#" > Home </a></li>

<li><a href= "#" > Course Hall </a></li>

<ul>

<li><a href= "#" >Javascript</a></li>

<li><a href= "#" >jQuery</a></li>

</ul>

<li><a href= "#" > Learning Center </a></li>

<li><a href= "#" > Classic case </a></li>

<li><a href= "#" > About Us </a></li>

</ul>

　　3. Add a style to the unordered list

　　　　/*css

Ul{list-style:none;} //Remove default dots for unordered list

UL li{

Float:left; //Let unordered list appear horizontally

line-height:40px; //Let unordered list be centered vertically

Text-align:center; //Let unordered list be centered in horizontal direction

position:relative; //parent element is positioned in order to make the submenu live directly below the top level of the menu

}

a{

Text-decoration:none; //Remove <a> underline

Color: #000; //color to <a>

Display:block; //Let <a> display as block-level elements

width:90px; //Give <a> a width

}

a:hover{

Background-color: #666; color: #fff;

} //Slide the mouse over an action

UL Li ul li{

Float:none; //Komi menu is displayed in vertical direction

Background: #eee;

margin-top:2px; //Komi 2px spacing between menus

}

UL Li ul{

width:90px;

Position:absolute; the//Komi menu is directly below the top level menu

Display:none; //Normal status submenu is hidden

}

UL Li:hover ul{

Display:block; //When the mouse slides to <li> on the parent menu, the corresponding submenu is displayed

}

*/

Complete code example:

Using CSS to make a drop-down menu