CSS Drop Down Menu
$30-40 USD
Paid on delivery
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" "[url removed, login to view]">
<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('[url removed, login to view]') 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('[url removed, login to view]') no-repeat top right;
padding: 12px 20px 0 20px;
}
ul#menu li a:hover {
background: url('[url removed, login to view]') no-repeat top right;
}
ul#menu li [url removed, login to view], ul#menu li [url removed, login to view]:hover {
color: #fff;
background: url('[url removed, login to view]') 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>
Project ID: #3125953