The following is the style CSSCode. I just modified and added some CSS files. I made a new position for incompatibility with Some browsers.
View CSS <Style type = "text/CSS">
* {
Margin : 0px ; Padding : 0px ;} /* Set the default margins of all labels to zero. */
# Posi {/*This is a newly added Div, which is used to pack all ul Li and absolutely position the navigation bar, as long as it is convenient to move*/
Position:Absolute;
Top:60px;
Left:60px;
Width:60px;}
# Main_daohang_left Li {Width:60px;
Background-color:Red;}
# Main_daohang_left Li a, # main_daohang_left Li ul Li {
Text-Decoration:None;}
# Main_daohang_left Li ul Li {
Padding-bottom:5px;
Padding-top:5px;
Vertical-align:Middle;
}
# Main_daohang_left Li, # main_daohang_left Li ul Li{
List-style : None ;}
# Main_daohang_left Li Div {
Display : None ;}
# Main_daohang_left li # menu: hover Div {
Display : Block ;
}
# Main_daohang_left Li ul Li: hover {
Background-color : # Da937d ;}
# Main_daohang_left Li ul, # main_daohang_left Li ul Li {
Width : 60px ;
Background-color : #487eb5 ;}
# Menulist {/*For the following menu, we add a new Div * to locate it.*/
Position:Relative;
Padding:0px;
Margin:0px;
Left:0px;
Top:0px;}
</Style>
The following is the HTML code. As long as two divs are added, it is convenient for location operations.
View HTML < Div ID = "Posi" >
< Ul ID = "Main_daohang_left" >
< Li ID = "Menu" > < A Href = "#" > < Span Onmouseover = "D_css (ID )" Onmouseout = "D_css_out (ID )" ID = "Student" > Item 1 </ Span > </ A >
<! -- Here is the menu item -->
< Div ID = "Menulist" >
< Ul >
< Li > < A Href = "#" > 1st rows </ A > </ Li >
< Li > < A Href = "#" > 2nd rows </ A > </ Li >
< Li > < A Href = "#" > 3rd rows</ A > </ Li >
< Li > < A Href = "#" > 4th rows </ A > </ Li >
</ Ul >
</ Div >
</ Li >
</ Ul >
</ Div >
If you have any incompatibility, you are welcome to discuss it. Let's take a look at it. Thank you.
<Style type = "text/CSS">