html - 使 parent 不扩展到 child 的内容

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

为 .nav ul ul 设置 position:absolute 因为如果你没有为那个 ul 指定 position 作为绝对位置它会继承从其父元素的相对位置开始，在这种情况下，父元素的宽度与内容的宽度相同，因此您的 li 取其子元素 ul 的宽度，即更大，绝对位置使ul独立。

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