Question

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

我已经尝试了固定，只是让它保持在那里，即使你滚动，菜单将跨越所有页面，固定将需要每次更改，因此它将无法工作。

所以我向社区提出的问题是，我如何为我的网站建立一个菜单系统，就像Lowes.com上的菜单系统一样

这是HTML＆amp; 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 { list-style：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元素：

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

解决方案的核心在于如何定位：绝对有效。

<强>绝对不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

删除位置：相对于你的位置可以解决问题。

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

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的导航系统

1 个答案: