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>

和SASS：

/**

  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表格布局调整此问题，如this question中的模拟问题所述

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

#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 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>

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

3 个答案: