html - 子菜单创造了额外的空间

Question

我正在尝试制作带有子菜单的垂直 CSS 菜单。我已经进行了一些研究，但无法完全找到我的具体问题的答案。li 中的 ul 定位正确（编辑：我希望 li>ul 中的第一个 li 与 li 内联，“1”与“Two”内联），但包含 ul 的 li 变得更大，并且我不希望这种情况发生。此处示例：http: //cssdesk.com/PHPNv

Answer 1

你已经很接近了，但我做了一些改变，应该可以帮助你。

nav li {
  background:#abcdef;
  border-bottom:solid 1px #9abcde;
  color:#000;
  display:block;
  padding:1em 0;
  text-align:left;
  text-indent:1em;
  text-decoration:none;
  width:100%;
  position:relative; /* need to add so nested elements are positioned relative to the current menu item */
}

nav li:hover ul {
  display: block;
  top:0;
  width:100%;
  position:absolute; /*need position absolute here to take it out of the 'flow'*/
  left:100%;
}