如何使用多个相邻列表创建下拉列表＆＃x27;

Question

我正在尝试为购物式式订单编写代码，当一个人徘徊在导航栏上的目标元素上时，它的功能与此网站。

我已经花了两天时间来查看许多页面，包括以前的Stackoverflow上的帖子，并尝试了似乎无限数量的方法，但是我根本无法破解这一点。

我应该强调的是，我已经可以为下拉列表编写代码，该下拉列表会在目标元素上徘徊时生成单个链接列表的列（这很容易）；我真的在说对齐相邻的多列。

几年前，这里发布了此类问题的解决方案，但该人建议使用浮动方法。我确实尝试了这个，但是结果对我的项目（非常）不满意。

如果您可以帮助我解决这个问题，请（立即）查看我的代码渲染和绘制时的样子，我在 codepen ，但代码也在下面发布：

html：html：

.nav-list {
  list-style: none;
  border: 1px solid blue;
  display: flex;
  flex-flow: row wrap;
  align-items: left;
  justify-content: space-around;
  color: white;
  background-color: #429CD9;
}

#hire-dropdown {
  position: absolute;
  cursor: pointer;
  background-color: #429CD9;
}

.the-drop {
  display: none;
}

#hire-dropdown:hover>.the-drop {
  display: grid;
  grid-template-areas: "drop-1-list drop-2-list";
  grid-template-columns: 1fr 1fr;
}

.drop-1-list,
.drop-2-list {
  display: none;
}

.drop-1-list {
  grid-area: "drop-1-list";
}

.drop-2-list {
  grid-area: "drop-2-list";
}

.the-drop:hover>.drop-1-list,
.the-drop:hover>.drop-2-list {
  background-color: white;
  border: 1px solid black;
  list-style: none;
}

<nav>
  <ul class="nav-list">
    <li>Nothing</li>
    <li class="to-hire">
      <div id="hire-dropdown">To Hire
        <div class=".the-drop">
          <ul class="drop-1-list">
            <li><a href="#">Access</a></li>
            <li><a href="#">Breaking</a></li>
            <li><a href="#">Compaction</a></li>
            <li><a href="#">Cooling</a></li>
            <li><a href="#">Drilling</a></li>
            <li><a href="#">Lifting</a></li>
            <li><a href="#">Sanding</a></li>
            <li><a href="#">Sawing</a></li>
          </ul>
          <ul class="drop-2-list">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
            <li><a href="#">Product 4</a></li>
            <li><a href="#">Product 5</a></li>
          </ul>
        </div>

      </div>
    </li>
  </ul>
</nav>

如果您还想查看我之前提到的float方法解决方案，则可以看到它在这里（但我不认为这是我项目的正确解决方案）。

您的（建设性）帮助将不胜感激。

Answer 1

不是100％确定您要如何处理所有狭窄的显示等。但是

• ＆lt; div class =“。the -drop”＆gt;删除标记中类上的
• 期限在您有问题的情况下，与CSS在一起的时间删除了一些问题，以回到“基本”这项工作。我这样做了，并调整了一些CSS选择器。我认为不需要绝对。
• 借助弯曲，然后显示块，它会跳动一点，但我会把它留给您。

.nav-list {
  list-style: none;
  border: 1px solid blue;
  display: flex;
  flex-flow: row wrap;
  align-items: start;
  justify-content: space-around;
  color: white;
  background-color: #429CD9;
}

#hire-dropdown {
  cursor: pointer;
  background-color: #429CD9;
}

.the-drop,
.drop-1-list,
.drop-2-list {
  display: none;
}

#hire-dropdown:hover * {
  display: grid;
}

#hire-dropdown .the-drop {
  grid-template-areas: "drop-1-list drop-2-list";
  grid-template-columns: 1fr 1fr;
}

.drop-1-list,
.drop-2-list {
  background-color: white;
  border: 1px solid black;
  list-style: none;
}

.drop-1-list {
  grid-area: "drop-1-list";
}

.drop-2-list {
  grid-area: "drop-2-list";
}

<nav>
  <ul class="nav-list">
    <li>Nothing</li>
    <li class="to-hire">
      <div id="hire-dropdown">To Hire
        <div class="the-drop">
          <ul class="drop-1-list">
            <li><a href="#">Access</a></li>
            <li><a href="#">Breaking</a></li>
            <li><a href="#">Compaction</a></li>
            <li><a href="#">Cooling</a></li>
            <li><a href="#">Drilling</a></li>
            <li><a href="#">Lifting</a></li>
            <li><a href="#">Sanding</a></li>
            <li><a href="#">Sawing</a></li>
          </ul>
          <ul class="drop-2-list">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
            <li><a href="#">Product 4</a></li>
            <li><a href="#">Product 5</a></li>
          </ul>
        </div>

      </div>
    </li>
  </ul>
</nav>

Answer 2

jQuery要处理事件，

$(function() {
  $(".to-hire").mouseenter(function() {
    $('.the-drop').show();
  }).mouseleave(function() {
    $('.the-drop').hide();
  });
});

您的类名称中有一个。此处＆lt; div class =“。the-drop”＆gt;，将其删除。

从CSS中删除这些代码行

.drop-1-list,
.drop-2-list {
    display: none;
}

现在