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;
}

这是 updated JSFiddle向您展示结果。

这应该会为您提供所需的行为。如果不是，请告诉我，我很乐意进一步提供帮助。祝你好运!