Help with CSS Horizontal drop down menu
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">
<s开发者_开发百科cript 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;}
possibly add position:relative; to the #menuwrapper style, and set left:0; top 20px; for the li ul, replacing "20px" with the height of the menu (couldn't see this value anywhere)
加载中,请稍侯......
精彩评论