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

Question

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

我在下面编写了一个简单的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

Answer 1

情况是这样的：你的主要<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%;
}

Answer 2

您可以通过使用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;
}

Answer 3

只有当您将鼠标悬停在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;
}