Question

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

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

谢谢！

Answer 1

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

我在下面为您提供了一个基本的（有点精简的）解决方案。您也可以在this 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;
}

定位我的CSS菜单

1 个答案: