文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >子菜单-保留父元素的最大宽度

问子菜单-保留父元素的最大宽度
EN

Stack Overflow用户
提问于 2018-03-05 18:55:53
回答 3查看 212关注 0票数 0

我有一个自定义菜单样式的问题:当子菜单可见时，项目不应该比当前父项目更宽。

我已经在下面准备了一个简单的代码示例，我尝试的内容在那里是可见的，但仍然存在以下问题：

​

​

此外，在实际页面上的任何位置都只有一个子菜单可见，如果该子菜单涉及任何内容的话。和“较长的子菜单项”应该换成两行，如果比父项目长！

基本的HTML (当然是动态打印的)：

代码语言：javascript
运行
复制
<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：

代码语言：javascript
运行
复制
/**

  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

html
css
sass
EN

回答 3

Stack Overflow用户

发布于 2018-03-05 19:19:03

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

​

​

你可以做什么来解决这种情况是添加到一个子菜单position: absolute，这样它就不会影响主<li>宽度：

代码语言：javascript
运行
复制
    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%;
}
票数 0
EN

Stack Overflow用户

发布于 2018-03-05 19:55:24

您可以按照this question中类似问题的说明来调整CSS Table布局

我们将li设置为表格，但是将子菜单设置为width:1%，这会将子菜单限制为父li的宽度。我们可以将li文本设置为no-wrap，以消除任何换行问题。

​

代码语言：javascript
运行
复制
#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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-03-06 14:03:49

仅当您将鼠标悬停在li.上时，子菜单才可见

​

代码语言：javascript
运行
复制
#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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49108844

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档