-2

我一直在玩三个级别的 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“一二”是一个水平菜单栏（这是有效的），sub菜单“三”和“四”正好在“二”下方排列。目前他们有点偏右。然后，将鼠标悬停在“三”上，subsub菜单“三一”和“三二”应与项目“三”水平对齐，但向右对齐。

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

另外，我怎样才能改进 CSS，清理它并使其更紧凑？

类似地，当我加载页面时，我使用的另一个菜单是透明的（即内容通过li元素可见），但当我滚动页面时，它只是li固化了一个像素。当它们是透明的时，它们也会在li:hover对 parent 不满意时消失ul。还没有完全弄清楚那里发生了什么。

4

1 回答 1

0

Your main problem is that you must set position: relative on the parent li of the #sub. That way you can position #sub relatively to it.

See the code here: http://jsfiddle.net/ckLAd/1/

Improve css:

  • Never do ul#id, but just #id. It is enough.
  • Never use id, but classes instead. Ids are too specific.
于 2013-05-25T21:25:43.783 回答