如何创建像 Lowes.com 这样的导航系统 [关闭]

Question

我正在为我的雇主开发菜单系统，他们想要一个类似于 Lowes.com 的菜单系统。当您单击 Shop 时，将打开一个带有子导航的 div，其中悬停不同类别。这全部包含在 1 个 div 中。我一直试图让它在我当前的网站上工作。我在这里设置了一个 JSFiddle：https://jsfiddle.net/wfmcleod/gjawzvpe/1/

我已经尝试过固定，即使您滚动它也会让它保持在那里，并且菜单将跨越所有页面，并且每次都需要更改固定，因此它不起作用。

所以我向社区提出的问题是，我如何为我的网站构建一个菜单系统，它可以像 Lowes.com 上的那样工作

这是 HTML 和 CSS：

这是 HTML：

 <ul class="main-navigation">
 <li><a href="#">Shop by Category</a>
 <ul>

  <li><a href="#">Apparel & Fashion Accessories</a>
    <ul>
      <li class="fixed">
        <div style="background-color: #e5e5ff; margin-top:-20px;">
          <h2>Apperal</h2>

          <table style="width:800px; height:500px;">
            <tr>
              <td colspan="5">This week</td>
            </tr>
            <tr align="center" valign="top">
              <td>
                <img src="/images/buttons.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Buttons & Magnets
              </td>
              <td>
                <img src="/images/lights.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Lights
              </td>
              <td>
                <img src="/images/notebooks.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Notebooks
              </td>
              <td>
                <img src="/images/pencils.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Pencils, Bookmarks, and container
              </td>
              <td>
                <img src="/images/polish.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Polish & Clothes
              </td>



            </tr>
          </table>
        </div>
      </li>
    </ul>
  </li>


  <li><a href="#">Custom Apparel & Bags
</a>
    <ul>
      <li class="fixed">
        <div style="background-color: #e5e5ff; margin-top:-20px;">
          <h2>Apperal</h2>

          <table style="width:800px; height:500px;">
            <tr>
              <td colspan="5">This week</td>
            </tr>
            <tr align="center" valign="top">
              <td>
                <img src="/images/buttons.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Buttons & Magnets
              </td>
              <td>
                <img src="/images/lights.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Lights
              </td>
              <td>
                <img src="/images/notebooks.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Notebooks
              </td>
              <td>
                <img src="/images/pencils.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Pencils, Bookmarks, and container
              </td>
              <td>
                <img src="/images/polish.jpg" width="150" height="auto" style="margin:20px;" />
                <br/> Polish & Clothes
              </td>



            </tr>
          </table>
        </div>
      </li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Events</a></li>
<li><a href="#">Articles</a></li>
</ul>

这里是 CSS： ul { 列表样式：无； 填充：0； 边距：0； 背景：#000080； }

ul li {
  display: block;
  position: relative;
  float: left;
  background: #000080;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  padding: 8px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover {
  background: #2c3e50;
}

li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
}

li:hover a {
  background: #000080;
}

li:hover li a:hover {
  background: #2c3e50;
}

.main-navigation li ul li {
  border-top: 0;
}

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

ul:after {
  clear: both;
}

Answer 1

好的，这就是它的要点。

在测试时，我删除了第二个嵌套的 ul li 并将其更改为具有绝对类的简单 div 元素：

 .absolute{
    position: absolute;
    top: 0;
    left: 210px;
    display: none;
 }

解决方案的核心在于 position: absolute 的工作原理。

绝对： 不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的框可以有边距，它们不会与任何其他边距一起折叠。

从你的 ul li css 中删除 position: relative 就可以了。

因为现在 ul li 不是 set 相对的，所以绝对元素将与父 ul 对齐。

ul li {
  display: block;
  float: left;
  background: #000080;
}

li:hover > .absolute, li:hover > ul {
  display: block;
  position: absolute;
}

我已经更新了你的 jsFiddle：https://jsfiddle.net/gjawzvpe/3/