<ul class="menu">
   <li><span>Open nested menu</span>
      <ul class="sub">
         <li>
            <a>Sub link 1</a>
         </li>
         <li>
            <a>Sub link 2<br> that wraps</a>
         </li>
      </ul>
   </li>
</ul>

html,
body {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid green;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 960px;
  margin: auto;
}

ul.sub {
  width: auto;
  margin: 0;
}

li {
  display: table-cell;
  background: green;
  vertical-align: middle;
  overflow: hidden;
}
.sub li {
  background: orange;
  border: 1px solid #fff
}
li a {
  display:block;
  margin:-99em 0;
  padding:100em 5px;
  cursor:pointer;
}

li a:hover {
  background: red
}