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提供给顶层菜单{{1 }}（等于顶部菜单宽度）到子导航菜单。

<强> See it in action

用它的父li排列子菜单

1 个答案: