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;}