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

Question

我正在尝试将此菜单从垂直更改为水平，我对 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>

Answer 1

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

从那里你可以决定如何在窄设备上处理它（可能是设置 flex 方向的媒体查询），你也可以通过查看各种 justify-content 设置。

此代码段设置 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>

Answer 2

添加 display:flex 它会起作用

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

Answer 3

您只需要在 li 选择器中添加“显示：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>

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

Change vertical menu to horizontal CSS

html

css

drop-down-menu