I have an existing CSS horizontal menu. I would like to add dropdown functionality. Must be cross browser compatible (IE6, IE7, FF, Safari, Opera, etc) and use minimal JS and hacks. Drop down should have the same style as the menu and should support two levels. No borders between submenu items.
## Deliverables
Existing CSS Horizontal Menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[login to view URL]">
<style type="text/css">
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 36px;
font-size: 12px;
font-weight: bold;
background: url('[login to view URL]') repeat-x top left;
font-family: Tahoma,Arial,Verdana,sans-serif;
border-bottom: 5px solid #163288;
border-top: 1px solid #A0D4EF;
}
ul#menu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#menu li a {
display: block;
float: left;
color: #333333;
text-decoration: none;
height: 24px;
background: url('[login to view URL]') no-repeat top right;
padding: 12px 20px 0 20px;
}
ul#menu li a:hover {
background: url('[login to view URL]') no-repeat top right;
}
ul#menu li [login to view URL], ul#menu li [login to view URL]:hover {
color: #fff;
background: url('[login to view URL]') no-repeat top right;
}
</style>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menu ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->
<ul id="menu">
<li><a href="#" class=current><span>Home</span></a></li>
<li><a href="#" ><span>Solutions</span></a></li>
<li><a href="#" ><span>For Agents</span></a></li>
<li><a href="#" ><span>For Carriers</span></a></li>
<li><a href="#" ><span>Support</span></a></li>
<li><a href="#" ><span>News & Events</span></a></li>
<li><a href="#" ><span>About Us</span></a></li>
</ul>