html - 将子子菜单对齐到父菜单的顶部

Question

我想仅使用 css 和 html 将子 ul 子菜单与父菜单水平对齐。

HTML：

    <ul>
       <li><a href"#">Item 1</a>
       <ul>
          <li><a href"page1.html">Item 1 child 1</a></li>
          <li><a href"page2.html">Item 1 child 2</a></li>
          <li><a href"#">Item 1 child 3</a></li>
       </ul>
       </li>
       <li><a href"page3.html">Item 2</a></li>
       <li><a href"page4.html">Item 3</a></li>
    </ul>

CSS：

    li{
      list-style: none;
      height:22px;
      font-size: 13px;
      background:#eee;
      width:110px;
    }

    li ul{
      margin-left:100px;
      top:0;
    }

可能吗？

最终结果应该是父菜单和子菜单在同一行水平

看看我到目前为止做了什么：http: //jsfiddle.net/cqfwj/

Answer 1

嗯，我想我可以提供一个解决方案（尽管我确信还有其他人）。

我只会使用相关元素的位置属性，使用相对和绝对定位。

我在您的 CSS 中添加/修改的样式定义如下：

ul{
    position:relative;
}

li ul{
    margin-left:100px;
    position:absolute;
    top:0;
}

这是更新后的 JSFiddle，向您展示了这会导致什么结果。

这应该给你你正在寻找的行为。如果不是，请告诉我，我很乐意提供进一步的帮助。祝你好运！