Css level 2 drop-down menu

<Div id = "nav">
<Ul>
<Li class = "menu2" onMouseOver = "this. className = 'menu1'" onMouseOut = "this. className = 'menu2 '"> my homepage
<Div class = "list">
<A href = "http://www.111cn.net/"> I love CSS </a> <br/>
<A href = "#"> my homepage </a> <br/>
<A href = "#"> My logs </a> <br/>
<A href = "#"> My logs </a> <br/>
<A href = "#"> My Album </a> <br/>
<A href = "#"> My Favorites </a> <br/>
</Div>
</Li>
<Li class = "menu2" onMouseOver = "this. className = 'menu1'" onMouseOut = "this. className = 'menu2 '"> Community Circle
<Div class = "list">
<A href = "http://www.111cn.net/"> I love CSS </a> <br/>
<A href = "#"> my homepage </a> <br/>
<A href = "#"> My logs </a> <br/>
<A href = "#"> My Album </a> <br/>
<A href = "#"> My Favorites </a> <br/>
</Div>
</Li>
<Li class = "menu2" onMouseOver = "this. className = 'menu1'" onMouseOut = "this. className = 'menu2 '"> My SMS
<Div class = "list">
<A href = "http://www.111cn.net/"> I love CSS </a> <br/>
<A href = "#"> My Album </a> <br/>
<A href = "#"> My Favorites </a> <br/>
</Div>
</Li>
<Li class = "menu2" onMouseOver = "this. className = 'menu1'" onMouseOut = "this. className = 'menu2 '"> Account Management
<Div class = "list">
<A href = "http://www.111cn.net/"> I love CSS </a> <br/>
<A href = "#"> my homepage </a> <br/>
<A href = "#"> My logs </a> <br/>
<A href = "#"> My Album </a> <br/>
<A href = "#"> My Favorites </a> <br/>
<A href = "#"> My logs </a> <br/>
<A href = "#"> My Album </a> <br/>
<A href = "#"> My Favorites </a> <br/>
</Div>
</Li>
</Ul>
</Div>

Class = "menu2"
OnMouseOver = "this. className = 'menu1 '"
OnMouseOut = "this. className = 'menu2 '"

Body {
Background-color: white;
Font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
Margin: 0px;
Padding: 0px;
Color: white;
}
Ul, li {
Margin: 0px;
Padding: 0px;
}
Li {
Display: inline;
List-style: none;
List-style-position: outside;
Text-align: center;
Font-weight: bold;
Float: left;
}
A: link {
Color: #336601;
Text-decoration: none;
Float: left;
Width: 100px;
Padding: 3px 5px 0px 5px;
}
A: visited {
Color: #336601;
Text-decoration: none;
Float: left;
Padding: 3px 5px 0px 5px;
Width: 100px;
}
A: hover {
Color: white;
Float: left;
Padding: 3px 3px 0px 20px;
Width: 88px;
Text-decoration: none;
Background-color: #539D26;
}
A: active {
Color: white;
Float: left;
Padding: 3px 3px 0px 20px;
Width: 88px;
Text-decoration: none;
Background-color: # BD06B4;
}
# Nav {
Width: 600px;
Height: 30px;
Border-bottom: 0px;
Padding: 0px 5px;
Position: absolute;
Z-index: 1;
Left: 198px;
Top: 25px;
}
. List {
Line-height: 20px;
Text-align: left;
Padding: 4px;
Font-weight: normal;
}
. Menu1 {
Width: 120px;
Height: auto;
Margin: 6px 4px 0px 0px;
Border: 1px solid #9CDD75;
Background-color: # F1FBEC;
Color: #336601;
Padding: 6px 0px 0px 0px;
Cursor: hand;
Overflow-y: hidden;
Filter: Alpha (opacity = 70 );
-Moz-opacity: 0.7;
}
. Menu2 {
Width: 120px;
Height: 18px;
Margin: 6px 4px 0px 0px;
Background-color: # F5F5F5;
Color: #999999;
Border: 1px solid # EEE8DD;
Padding: 6px 0px 0px 0px;
Overflow-y: hidden;
Cursor: hand;
} Effect image.