这是一个基本菜单：
http://jsbin.com/atupizip/3/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="nav">
<li><a>Home</a></li>
<li>
<a>Our Staff</a>
<div class="pos-fix">
<ul class="vert">
<li><a>Jon Skeet</a></li>
<li><a>Spiderman</a></li>
</ul>
</div>
</li>
<li><a>Contact Us</a></li>
</ul>
</body>
</html>
body, ul, li, a {
margin: 0;
padding: 0;
}
a {
cursor: pointer;
}
.nav {
list-style: none;
width: 100%;
display: table;
}
.nav li {
display: table-cell;
background: red;
}
.nav a {
display: block;
text-align: center;
padding: 10px;
}
.pos-fix {
position: relative;
}
.nav a:before {
content: '';
display: inline-block;
height: 30px;
width: 30px;
background: url(http://placehold.it/30x30);
float: left;
margin: -5px 0 0 0;
}
.nav a:hover {
background: black;
color: yellow;
}
.nav li:hover .vert {
display: block;
}
.vert {
display: none;
width: 100%;
position: absolute;
}
.vert li {
width: 100%;
display: block;
}
让我们看看子菜单（我们的工作人员/约翰·斯凯特。蜘蛛侠）。如何将它们设置为100％宽度并与左对齐？到目前为止，我试图将其制成width: 10000px; overflow: hidden;，但仍出现水平滚动条。甚至position: absolute; left: 0;都拧紧
您的pos-fix DIV引起了问题。删除它。
小提琴
（相关）CSS
.vert {
display: none;
width: 100%;
position: absolute;
top: 40px;
left:0;
}
.vert li {
width: 100%;
display: block;
text-align: left;
}
.vert a {
text-align: left;
}
.vert a:before {
margin-right: 10px;
}
执行此操作：
ul.nav .pos-fix {
left: 0;
margin: 0;
position: absolute;
right: 0;
}