如何创建像 Lowes.com 这样的导航系统

Question

我正在为我的雇主开发一个菜单系统，他们想要一个类似于 Lowes.com 的菜单系统。当您点击“商店”时，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 { 列表样式：none；填充：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 元素 class absolute:

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

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

absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

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

因为 ul li 现在没有设置为相对元素，绝对元素将与父 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/

如何创建像 Lowes.com 这样的导航系统

How do I create a navigation system like that of Lowes.com

html

css

jquery

submenu