在嵌套菜单中，如何使子菜单100％并向左对齐？

Question

这是一个基本菜单：

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

让我们来看看子菜单（我们的员工/ John Skeet。蜘蛛侠）。 如何将它们设置为100％宽度并向左对齐？ 到目前为止，我试图使其width: 10000px; overflow: hidden; width: 10000px; overflow: hidden; 但水平滚动条仍然出现。 甚至position: absolute; left: 0; position: absolute; left: 0; 所有的螺丝钉

Answer 1

做这个：

 ul.nav .pos-fix {
        left: 0;
        margin: 0;
        position: absolute;
        right: 0;
    }

Answer 2

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

在嵌套菜单中，如何使子菜单100％并向左对齐？

问题描述

2 个解决方案

解决方案1
1 2014-02-05 10:29:20

解决方案2
1 已采纳 2014-02-05 10:29:42

（相关）CSS

在嵌套菜单中，如何使子菜单100％并向左对齐？

问题描述

2 个解决方案

解决方案1 1 2014-02-05 10:29:20

解决方案2 1 已采纳 2014-02-05 10:29:42

（相关）CSS

解决方案1
1 2014-02-05 10:29:20

解决方案2
1 已采纳 2014-02-05 10:29:42