html - 定位我的 CSS 菜单

Question

我正在尝试更新我公司的网站菜单，并且我已经设法完成了所有操作，除非菜单在鼠标悬停时扩展其宽度，2 级和 3 级列表堆叠在一起。我理解它，因为我做了绝对而不是相对的定位，以避免 1 级菜单在悬停时上下移动。有人对我如何设法显示子菜单并保持主菜单不在鼠标悬停上移动有任何建议吗？

这是我的 jsfiddle 代码，http://jsfiddle.net/#&togetherjs=hyRjkxLPGH。

谢谢！

Answer 1

你的小提琴有很多问题。首先，唯一应该在<ul>标签内的元素是<li>标签，而不是文本。其次，您几乎正确地使用了绝对定位，但是您需要给每个 li 一个相对位置。

我在下面为您提供了一个基本（有些精简）的解决方案。你也可以在这个 fiddle找到这个。

我敢肯定，你可以很容易地重新插入你的样式，也许使用更多的类和更少的 CSS 选择器（你曾经使用过 SCSS 吗？）

HTML

<ul class="menubar">
  <li><a href="#">menu1</a>
    <ul>
      <li><a href="#">submenu1</a>
        <ul>
          <li><a href="#">submenu11</a></li>
          <li><a href="#">submenu12</a></li>
          <li><a href="#">submenu13</a></li>
        </ul>
      </li>
      <li>submenu2
        <ul>
          <li>submenu21</li>
          <li>submenu22</li>
          <li>submenu23</li>
        </ul>
      </li>
      <li>submenu3
        <ul>
          <li>submenu31</li>
          <li>submenu32</li>
          <li>submenu33</li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">menu2</a>
    <ul>
      <li><a href="#">submenu1</a>
        <ul>
          <li><a href="#">submenu11</a></li>
          <li><a href="#">submenu12</a></li>
          <li><a href="#">submenu13</a></li>
        </ul>
      </li>            
      <li>submenu2
        <ul>
          <li>submenu21</li>
          <li>submenu22</li>
          <li>submenu23</li>
        </ul>
      </li>
      <li>submenu3
        <ul>
          <li>submenu31</li>
          <li>submenu32</li>
          <li>submenu33</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

.menubar, .menubar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menubar > li {
  display: inline-block;
  position: relative;
}

.menubar li ul {
  display: none;
}
.menubar li:hover > ul {
  display: block;
  position: absolute;
  width: 100px;
}
.menubar li:hover > ul > li {
  position: relative;
}
.menubar > li > ul > li ul {
  position: absolute;
  top: 0;
  left: 100px;
}