html - 将子菜单与其父 li 对齐

Question

我正在尝试设置一个子菜单，其中第一项与其父项的 li 项对齐，有没有一种方法可以在不使用第二个 ul 的负边距（#innerNav）的情况下做到这一点。我的代码可以在http://jsfiddle.net/ueEEa/2/找到

---

#parentNav {
  float: left;
  padding: 0;
  width: 160px;
  border-bottom: 1px dashed #999;
}

#parentNav > li, #parentNav > li > #innerNav > li {
  list-style: none;
  border: 1px dashed #999;
  display: block;
}

#parentNav li #innerNav {
  display: none;
}

#parentNav > li:hover >  {
  display: block;
  margin-left: 160px;
  width: 160px;
  padding: 0px;
  position:absolute
}

<div>
    <ul id="parentNav">
        <li>Item 1</li>
        <li>Item 2
            <ul id="innerNav">
                <li>Item 2.1</li>
                <li>Item 2.2</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
</div>

Answer 1

您可以通过提供子导航菜单display: inline-block而不是block.

这样做意味着它的左边缘通常会与父<li>元素的右边缘齐平，因此要解决这个问题，我们还需要给display: relative顶部菜单和left: 160px（等于顶部菜单宽度）给子导航菜单。

看到它在行动。