将垂直菜单更改为水平 CSS答案

【问题标题】：Change vertical menu to horizontal CSS将垂直菜单更改为水平 CSS
【发布时间】：2022-01-28 06:50:42
【问题描述】：

我正在尝试将此菜单从垂直更改为水平，我对 css 不是很熟悉，所以我不确定解决方案。到目前为止，我通过参数 display:inline-block; 了解到这一点。您可以指定元素水平排列，但它对我不起作用。我将不胜感激。

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75),
    });
  });
});

.wrapper {
  position: relative;
}

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
  overflow-x: auto;
}

li {
  position: static;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: inline-block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .wrapper {
  cursor: auto;
}

li .wrapper li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n + 1) {
  background: #0064b3;
}

.parent {
  background: #00b99b;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <ul>
      <li>Abc</li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li class="parent">
        Mno >
        <div class="wrapper">
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li class="parent">
              Mno >
              <div class="wrapper">
                <ul>
                  <li>Abc</li>
                  <li>Def</li>
                  <li>Ghi</li>
                  <li>Jkl</li>
                  <li>Mno</li>
                  <li>Pqr</li>
                  <li>Stu</li>
                  <li>Vw</li>
                  <li>Xyz</li>
                </ul>
              </div>
            </li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
      <li class="parent">
        Abc >
        <div class="wrapper">
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li>Mno</li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li>Mno</li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
    </ul>
  </div>
</body>

</html>

【问题讨论】：

有很多选项，但为了快速修复，您可以使用 css 显示属性。使用 display: table-cell;
试试，display: flex; flex-wrap: wrap; 获取无序列表.wrapper ul

标签： html css drop-down-menu

【解决方案1】：

如果您将列表设置为显示为 flex，它将（默认情况下）在一行中显示其子项。

从那里您可以决定如何在狭窄的设备上处理它（可能是设置 flex 方向的媒体查询），您还可以通过查看各种 justify-content 设置以水平模式展开 li 项目。

这个 sn-p 设置 justify-content: spread-between 只是作为一个例子。

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75),
    });
  });
});

.wrapper {
  position: relative;
}

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
  overflow-x: auto;
}
.wrapper > ul {
  display: flex;
  justify-content: space-between;
}

li {
  position: static;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: inline-block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .wrapper {
  cursor: auto;
}

li .wrapper li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n + 1) {
  background: #0064b3;
}

.parent {
  background: #00b99b;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <ul>
      <li>Abc</li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li class="parent">
        Mno >
        <div class="wrapper">
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li class="parent">
              Mno >
              <div class="wrapper">
                <ul>
                  <li>Abc</li>
                  <li>Def</li>
                  <li>Ghi</li>
                  <li>Jkl</li>
                  <li>Mno</li>
                  <li>Pqr</li>
                  <li>Stu</li>
                  <li>Vw</li>
                  <li>Xyz</li>
                </ul>
              </div>
            </li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
      <li class="parent">
        Abc >
        <div class="wrapper">
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li>Mno</li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li>Mno</li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
    </ul>
  </div>
</body>

</html>

【讨论】：

有没有办法让列表向下显示而不是在同一行？
是的，正如我建议你改变弯曲方向。也许您可以多描述一些您想要的内容，因为您的原始代码已经显示了列表。
我只需要水平的父列表和垂直下降的其他列表，就像一个下拉列表。使用这个解决方案，所有的下拉列表都水平显示
对哪个 ul 获得 flex 更有选择性，例如只选择那些是 wrapper 直接子级的 ul。

【解决方案2】：

添加 display:flex 就可以了

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
        display: flex;
  overflow-x: auto;
}

【讨论】：

【解决方案3】：

您只需要在 li 选择器中添加“display: inline-block”属性，它将使所有列表水平。

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75),
    });
  });
});

.wrapper {
  position: relative;
}

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
  overflow-x: auto;
}

li {
  position: static;
  display: inline-block;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: inline-block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;

}

li ul {
  margin: 0;
}

li .wrapper {
  cursor: auto;
}

li .wrapper li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n + 1) {
  background: #0064b3;
}

.parent {
  background: #00b99b;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <ul>
      <li>Abc</li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li class="parent">
        Mno >
        <div class="wrapper">
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li class="parent">
              Mno >
              <div class="wrapper">
                <ul>
                  <li>Abc</li>
                  <li>Def</li>
                  <li>Ghi</li>
                  <li>Jkl</li>
                  <li>Mno</li>
                  <li>Pqr</li>
                  <li>Stu</li>
                  <li>Vw</li>
                  <li>Xyz</li>
                </ul>
              </div>
            </li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
      <li class="parent">
        Abc >
        <div class="wrapper">
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li>Mno</li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li>Mno</li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
    </ul>
  </div>
</body>

</html>

【讨论】：