Hey guys, need some guidance on how to get the sub menu to drop directly under the whole width of the navigation bar for each and every option. Basically i want the sub menu to appear in one static position regardless of which option I hover over.
Here is the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="p7exp.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="p7exp.js"></script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #p7menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PVII CSS Express Drop-Down Menu</title>
</head>
<body onLoad="P7_ExpMenu()">
<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="#"><img src="images/nav/nav_services_off.gif" width="74" height="74" alt="Services" class="space" /></a></li>
<li><a class="trigger" href="#"><img src="images/nav/nav_services_off.gif" width="74" height="74" alt="Services" class="space"/></a>
<ul>
<li><a href="#">Sub 1.1</a></li>
<li><a href="#">Sub 1.2</a></li>
<li><a href="#">Sub 1.3</a></li>
<li><a href="#">Sub 1.4</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><img src="images/nav/nav_services_off.gif" width="74" height="74" alt="Services" class="space"/></a>
<ul>
<li><a href="#">Sub 2.1</a></li>
<li><a href="#">Sub 2.2</a></li>
<li><a href="#">Sub 2.3</a></li>
<li><a href="#">Sub 2.4</a></li>
<li><a href="#">Sub 2.5</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><img src="images/nav/nav_services_off.gif" width="74" height="74" alt="Services" class="space"/></a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a></li>
<li><a href="#">Sub 3.3</a></li>
<li><a href="#">Sub 3.4</a></li>
<li><a href="#">Sub 3.5</a></li>
<li><a href="#">Sub 3.6</a></li>
<li><a href="#">Sub 3.7</a></li>
<li><a href="#">Sub 3.8</a></li>
</ul>
</li>
</ul>
<br class="clearit">
</div>
</body>
</html>
And here is my CSS
#menuwrapper {
background-color: #fff;
background-repeat: repeat-x;
float:right;
padding:0 5px 0 5px;
}
.space {
padding-left:2.5px;
padding-right:2.5px;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
img {
border:none;
}
#p7menubar li {
float: left;
width: 9em;
}
#p7menubar li ul, #p7menubar ul li {
width: 12em;
}
#p7menubar li ul {
margin:-5px 0px 0 0;
position: absolute;
display: none;
background-color: #FFFFFF;
border: 1px solid #434344;
background-repeat: repeat-x;
width:300px;
}
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #000000;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
color: #000;
background-color: transparent;
}
#p7menubar ul a:hover {
background-color: #434344!important;
color: #FFFFFF!important;
#p7menubar li {width: auto;}