將垂直選單更改為水平CSS-有解無憂

我正在嘗試將此選單從垂直更改為水平，我對 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>

uj5u.com熱心網友回復：

如果您將串列設定為顯示為 flex，它將（默認情況下）在一行中顯示其子項。

從那里您可以決定如何在狹窄的設備上處理它（可能是設定 flex 方向的媒體查詢），您還可以通過查看各種 justify-content 設定以水平模式展開 li 專案。

這個片段設定 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>

uj5u.com熱心網友回復：

添加display:flex它將起作用

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

uj5u.com熱心網友回復：

您只需要在 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/422392.html

標籤：

上一篇：如何在不使用最大寬度的情況下在表格單元格上使用省略號？

下一篇：CSS如何將框顯示為網格