让父母不要扩展到孩子的内容

Question

好吧，我一直在尝试制作水平菜单栏几天，然后我尽可能地缩小了CSS。 但我有一个问题，我不希望ul li元素扩展到ul ul的内容。任何想法我怎么能这样做？ 据我所知，由于ul li元素具有display:inline-block，因此它们将始终扩展到内容。 这就是我所拥有的： jsFiddle

	body,
	html {
	  padding: 0px;
	  margin: 0px;
	  height: 200%;
	}
	.nav {
	  postion: fixed;
	  top: 0;
	  width: 100%;
	  margin: 0px;
	  padding: 0px;
	  margin: 0px;
	  height: 50px;
	  color: #F5F5F5 !important;
	  font-size: 0px;
	}
	.nav ul {
	  list-style-type: none;
	  postion: relative;
	  margin-left: -40px;
	}
	.nav ul li {
	  display: inline-block;
	  line-height: 50px;
	  font-size: 15px;
	}
	.nav ul ul {
	  visibility: hidden;
	}
	.nav ul ul li {
	  display: block;
	  font-size: 15px;
	  top: -100%;
	}
	.nav ul li:hover>ul {
	  visibility: visible;
	}
	.nav {
	  background: #35404F;
	  border-bottom: 4px solid #17A697;
	  font-family: 'PT Sans', sans-serif;
	}
	.nav ul li {
	  transition: background 250ms ease-in;
	}
	.nav ul li:hover {
	  background: #17A697;
	}
	.nav ul ul li {
	  transition: background 250ms ease-in;
	  background: #35404F;
	}
	.nav ul ul li:hover {
	  background: #17A697;
	}
	.nav a {
	  margin: 0px 20px;
	}
	

<div class="nav">
  <ul>
    <li><a>Hi there</a>
      <ul>
        <li><a>Here is </a>
        </li>
        <li><a>Awesome</a>
        </li>
      </ul>
    </li>
    <li class="aright"><a>Hi there</a>
      <ul>
        <li><a>Here is the awesomeness</a>
        </li>
        <li><a>Awesome</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

为position:absolute设置.nav ul ul因为如果您没有为ul指定位置，那么它将继承其父级的位置，即在这种情况下，父元素的宽度与内容的宽度相同，因此，li取其子ul的宽度，absolute position使ul的宽度更大{{1}} 1}}独立。

http://jsfiddle.net/fy6wggo1/1/