Question

我已经玩了三级的CSS菜单了一点点，但我似乎无法让布局完全正确。 HTML端的菜单只是一堆嵌套的无序列表：

<ul id="menu">
  <li>One</li>
  <li>Two
    <ul id="sub">
      <li>Three
        <ul id="subsub">
          <li>Three One</li>
          <li>Three Two</li>
        </ul>
      </li>
      <li>Four</li>
    </ul>
  </li>
</ul>

这个小提琴中的CSS：http://jsfiddle.net/ckLAd/

我想要的是menu“One Two”是一个横向菜单栏（正常工作），sub菜单“三”和“四”排列在正下方“二”。目前他们有点偏向右边。然后，将鼠标悬停在“三”上，subsub菜单“三一”和“三二”应与“三”项水平对齐，但与右侧对齐。

这是令我困惑的对齐方式。子菜单目前使用left: 3em; top: 0;对齐，但这对我来说似乎相当苛刻。有没有办法更好，更精确地做到这一点？

另外，我如何改进CSS，清理它并使其更紧凑？

在类似的说明中，当我加载页面时，我玩的另一个菜单是透明的（即通过li元素可以看到内容），但是当我滚动页面的那一刻{{1固化。当它们是透明的时，如果父li不满足li:hover，它们也会消失。还没有弄清楚那里发生了什么。

Answer 1

您的主要问题是您必须在#sub的父li上设置position: relative。这样你可以将#sub相对于它定位。

请参阅此处的代码：http://jsfiddle.net/ckLAd/1/

改善css：

永远不要做ul＃id，但只做#id。这就够了。
永远不要使用id，而是使用类。 Ids太具体了。

获得CSS菜单布局恰到好处？

1 个答案: