嘿伙计们，需要一些关于如何让子菜单直接放在导航栏的整个宽度下的每个选项的指导。基本上，无论我悬停在哪个选项上，我都希望子菜单出现在一个静态位置。
这是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;}
最佳答案
可能添加 position:relative;到#menuwrapper 样式，并设置 left:0;前 20 像素；对于 li ul，用菜单的高度替换“20px”(在任何地方都看不到这个值)
关于css - 帮助 CSS 水平下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4035889/