子菜单 - 保持父元素的最大宽度

Posted 2021-05-04

我在设置自定义菜单样式时遇到问题：当子菜单可见时，项目不应该比当前父项更宽。

我在下面编写了一个简单的codepen示例，我在那里看到的是可见的，但问题是：

此外，只有一个子菜单在真实页面上的任何位置都可见，如果它可以解决任何问题。并且“更长的子菜单项”应该包含两行，如果长于父项！

基本html（当然是动态打印）：

<div id="menu">

  <nav class="nav menu-inline" role="navigation">

    <ul class="">

      <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="#url">Main Menu item</a>
        <ul class="sub-menu">
          <li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-171">
            <a href="#section1">Longer submenu item</a>
          </li>
          <li id="menu-item-172" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-172">
            <a href="#section2">Another submenu itm</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14">
        <a href="#url2">2nd menu item</a>
        <ul class="sub-menu">
            <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168">
            <a href="#section1">short submenu</a>
          </li>
          <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169">
            <a href="#section2">short #2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#3">3rd main item</a>
      </li>

    </ul>

  </nav>

</div>

和萨斯：

/**

  HOW TO ACHIEVE that "Longer submenu item" is aligned left with "Main Menu item" (if longer it should break into multiple lines). Of course all the text is dynamic and can be of any length..

 */
#menu {
  max-width: 700px; // just to show what I mean easier
}

nav {
  text-align: center;
  font-size: 18px;
  margin-bottom: 30px;
  ul {
    background: aqua;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      text-align:left;
      display: inline-block;
      margin: 0 30px;
      vertical-align: top; // need this (try on/off)

      a {
        color: black;
      }

    }

      &.sub-menu {
        text-align: left; // need this (try on/off)
        margin-top: 15px;
        li {
          display: block;
          margin-left:0; // need this (setting margin for all li above)
          margin-right:0; // need this (setting margin for all li above)
        }
      }

    }
}

你怎么解决这个问题，我在这里有点不知所措:)

https://codepen.io/anon/pen/zRQJzB

答案

情况是这样的：你的主要<li>项目没有固定的宽度，这就是为什么如果你在子菜单中添加更长的文本，主<li>的宽度增加了一点。实际上子菜单文本左对齐，公共宽度更大。检查图片，我已添加到主<li>项目和子菜单绿色背景：

你能做些什么来修复情况是添加到子菜单position: absolute，所以它不会影响主要的<li>宽度：

    nav ul li {
      display: inline-block;
      margin: 0 30px;
      vertical-align: top;
      position: relative;
    }

    nav ul.sub-menu {
    text-align: left;
    margin-top: 15px;
    position: absolute;
    width: 100%;
}

另一答案

您可以通过使用CSS表格布局来调整这一点，如qazxsw poi中针对类似问题所述

我们将this question作为一个表，但将子菜单设置为li，这将子菜单限制为父width:1%的宽度。我们可以将li文本设置为li以抵消任何包装问题。

no-wrap

#menu {
  max-width: 700px;
}

nav {
  text-align: center;
  font-size: 18px;
  margin-bottom: 30px;
}

nav ul {
  background: aqua;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  text-align: left;
  display: inline-table;
  margin: 0 30px;
  vertical-align: top;
  position: relative;
  border: 1px solid grey;
  white-space: nowrap;
}

nav ul li a {
  color: black;
}

nav ul.sub-menu {
  text-align: left;
  margin-top: 15px;
  width: 1%;
}

nav ul.sub-menu li {
  display: block;
  margin-left: 0;
  margin-right: 0;
}

另一答案

只有当您将鼠标悬停在li上时，子菜单才会显示。

<div id="menu">

  <nav class="nav menu-inline" role="navigation">

    <ul class="">

      <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="#url">Main Menu item</a>
        <ul class="sub-menu">
          <li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-171">
            <a href="#section1">Longer submenu item</a>
          </li>
          <li id="menu-item-172" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-172">
            <a href="#section2">Another submenu item</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14">
        <a href="#url2">2nd menu item</a>
        <ul class="sub-menu">
          <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168">
            <a href="#section1">short submenu</a>
          </li>
          <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169">
            <a href="#section2">short #2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#3">3rd main item</a>
      </li>

    </ul>

  </nav>

</div>

#menu {
	max-width: 700px;
}
nav {
	text-align: center;
	font-size: 18px;
	margin-bottom: 30px;
}
nav ul {
	background: aqua;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	position: relative;
	text-align: left;
	display: inline-block;
	margin: 0 30px;
	vertical-align: top;
	z-index: 1;
}
nav ul li a {
	color: black;
}
nav li ul.sub-menu {
	text-align: left;
	padding: 5px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition: all .4s;
}
nav li:hover ul.sub-menu {
	opacity: 1;
	overflow: visible;
	visibility: visible;
	top: 21px;
}
nav ul.sub-menu li {
	display: block;
	margin-left: 0;
	margin-right: 0;
}

以上是关于子菜单 - 保持父元素的最大宽度的主要内容，如果未能解决你的问题，请参考以下文章

如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停

当父元素和子元素都具有不同的百分比宽度时如何使子 div 居中

垂直对齐父元素以排列中间子元素

CSS 子元素宽度变宽时，如何撑开父元素？

共享元素转换在父片段和子片段之间不起作用（嵌套片段）

悬停在子菜单上后保持父菜单项突出显示（HTML/CSS/Jquery）