Simple Dropdown Menu Css

Html:

<div id=”menu”>
<ul id=”main_menu”>
<li id=”m1″><a href=”#” class=”menu_1″>Home</a></li>
<li id=”m2″><a href=”#” class=”menu_2″>Projects</a></li>
<li id=”m3″><a href=”#” class=”menu_3″ id=”active_3″>About</a>
<ul id=”sub”>
<li><a href=”#”>About Company</a></li>
<li><a href=”#”>About People</a></li>
</ul>
</li>
<li id=”m4″><a href=”#” class=”menu_4″>Careers</a></li>
<li id=”m5″><a href=”#p” class=”menu_5″>Contact</a></li>
</ul>
</div>

Css:

#main_menu {
font-family: ‘Verdana’;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position:absolute;
z-index:1000;
}
#main_menu li {
display: block;
position: relative;
float: left;
}
#main_menu li #sub {
display: none;
position:relative;
}
#main_menu li a {
font-size:16px;
color:#000000;
display:block;
padding:0px 20px;
text-decoration:none;
height:40px;
line-height:40px;
border-bottom:5px solid #ffffff;
}
#main_menu li a:hover {
}
#main_menu #m3:hover #sub {
display: block;
margin:0px;
position:absolute;
border:1px solid #6DA233;
background:#FFFFFF;
padding:10px 10px 20px 10px;
}
#main_menu #m3:hover #sub li {
float: none;
font-size: 11px;
}
#main_menu #m3:hover a {
border-bottom:5px solid #6DA233;
width:auto;
}
#main_menu #m3:hover #sub li {
width:200px;
}
#main_menu #m3:hover #sub li a {
border-bottom:5px solid #CCC;
padding:0px;
}
#main_menu #m3:hover #sub li a:hover {
border-bottom:5px solid #6DA233;
}
#main_menu li .menu_1:hover, #main_menu li #active_1 {
border-bottom:5px solid #0e819e;
}
#main_menu li .menu_2:hover, #main_menu li #active_2 {
border-bottom:5px solid #FD561E;
}
#main_menu li .menu_3:hover, #main_menu li #active_3 {
border-bottom:5px solid #6DA233;
}
#main_menu li .menu_4:hover, #main_menu li #active_4 {
border-bottom:5px solid #7C21E2;
}
#main_menu li .menu_5:hover, #main_menu li #active_5 {
border-bottom:5px solid #970E06;