0
嘿家伙，需要一些指导如何让子菜单直接下降到导航栏的全部宽度为每个选项。基本上我希望子菜单出现在一个静态位置，而不管我悬停在哪个选项。帮助与CSS水平下拉菜单
下面是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>
这里是我的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;}