In a nested menu, how to make sub menus 100% and aligned to left?

Question

Here is a basical menu:

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

lets look at the submenu (our staff / John Skeet . Spiderman). How to set them to be 100% width and aligned to left? So far I tried to make it width: 10000px; overflow: hidden; width: 10000px; overflow: hidden; but horizontal scrollbars still appears. And even position: absolute; left: 0; position: absolute; left: 0; screws all up

Answer 1

Do this:

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

Answer 2

Your pos-fix div was causing the problem. Remove it.

FIDDLE

(Relevant) 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;
}

In a nested menu, how to make sub menus 100% and aligned to left?

Question

2 answers

solution1
1 2014-02-05 10:29:20

solution2
1 ACCPTED 2014-02-05 10:29:42

(Relevant) CSS

In a nested menu, how to make sub menus 100% and aligned to left?

Question

2 answers

solution1 1 2014-02-05 10:29:20

solution2 1 ACCPTED 2014-02-05 10:29:42

(Relevant) CSS

solution1
1 2014-02-05 10:29:20

solution2
1 ACCPTED 2014-02-05 10:29:42