Question

我正在尝试构建一个多级导航栏但是卡在子菜单的宽度上。如何制作，以便子菜单的宽度至少为！它的父项宽度，但也允许它增长到其列表中最宽项的宽度。子菜单中的所有项目应具有相同的宽度。我现在不想要包装。

请参阅以下代码，了解我目前正在使用的内容。忽略颜色，它们就在那里，所以我可以在尝试改变时看到变化。

我只想保留这个css，所以没有javascript请，我不想硬编码任何宽度值，因为菜单将动态填充我不确定的值。：）

提前感谢！

＆＃13;

.nav{
	background-color:#d6336c;
}
.nav ul{
    list-style: none;
}
.nav ul li{
	padding:2px 10px;
	float: left;
	position:relative;
	background: #1bc2a2;
    white-space: nowrap;
}

.nav ul li ul{
	display:none;
    min-width: 100%;
}
.nav ul li:hover > ul{
	display: block;
	position: absolute;
	background-color:orange;
}
.nav ul ul ul{
	left:100%;
	top:0;
}

.nav a{
	color:#ffffff;
}
ul,li{
    margin:0;
    padding:0;
}

＆＃13;

<div class="nav">
	<ul>
		<li><a href="#">first</a></li>
		<li><a href="#">second</a>
			<ul>
				<li><a href="#">sub1 first</a></li>
				<li><a href="#">sub1 second</a>
				<ul>
					<li><a href="#">sub2 first</a></li>
					<li><a href="#">sub2 second</a>
						<ul>
							<li><a href="#">sub3 first</a></li>
							<li><a href="#">sub3 second</a></li>
							<li><a href="#">sub3 third</a></li>
						</ul>
					</li>
				</ul>
				</li>
					<li><a href="#">sub2 third</a></li>
			</ul>
		</li>
		<li><a href="#">third</a>
				<ul>
					<li><a href="#">.</a>
					<li><a href="#">.</a>
					<li><a href="#">.</a>
				</ul>
			</li>
		<li><a href="#">fourth</a></li>
		<li><a href="#">fifth</a></li>
	</ul>
</div>

＆＃13;

我

Answer 1

嵌套菜单上的

min-width: 100%将确保菜单至少与父li一样宽，white-space: nowrap上的li将扩展宽度li的

中较长文字的菜单

.nav {
  background-color: #d6336c;
}

.nav ul {
  list-style: none;
}

.nav ul li {
  padding: 2px 10px;
  float: left;
  position: relative;
  background: #1bc2a2;
  white-space: nowrap;
}

.nav ul li ul {
  display: none;
  min-width: 100%;
  padding: 0;
}

.nav ul li:hover>ul {
  display: block;
  position: absolute;
  background-color: orange;
}

.nav ul ul ul {
  left: 100%;
  top: 0;
}

.nav a {
  color: #ffffff;
}

<div class="nav">
  <ul>
    <li><a href="#">first</a></li>
    <li><a href="#">second</a>
      <ul>
        <li><a href="#">sub1 first</a></li>
        <li><a href="#">sub1 second</a>
          <ul>
            <li><a href="#">sub2 first</a></li>
            <li><a href="#">sub2 second</a>
              <ul>
                <li><a href="#">sub3 first</a></li>
                <li><a href="#">sub3 second</a></li>
                <li><a href="#">sub3 third</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">sub2 third</a></li>
      </ul>
    </li>
    <li><a href="#">third</a></li>
    <li><a href="#">fourth</a></li>
    <li><a href="#">fifth</a></li>
  </ul>
</div>

Answer 2

看起来关键是white-space: nowrap，有几个额外的样式来保持正确的间距。这是添加到下面的代码段中的内容：

.nav ul.dropdown li {
  /* change to allow full width */
    padding:2px 0 2px 10px;

  /* prevent breaking word to new line */
  white-space: nowrap;

  /* make green color extend */
  min-width: 100%;
}

.nav{
	background-color:#d6336c;
}
.nav ul{
    list-style: none;
}
.nav ul li{
  padding: 2px 10px; 
	float: left;
	position:relative;
	background: #1bc2a2;
}

.nav ul li ul{
	display:none;
}
.nav ul li:hover > ul{
	display: block;
	position: absolute;
	background-color:orange;
}
.nav ul ul ul{
	left:100%;
	top:0;
}

.nav ul.dropdown li {
  /* change to allow full width */
	padding:2px 0 2px 10px;
    
  /* prevent breaking word to new line */
  white-space: nowrap;
  
  /* make green color extend */
  min-width: 100%;
}

.nav a{
	color:#ffffff;
}

<div class="nav">
	<ul>
		<li><a href="#">first</a></li>
		<li><a href="#">second</a>
			<ul class="dropdown">
				<li><a href="#">sub1 first</a></li>
				<li><a href="#">sub1 second</a>
				<ul class="dropdown">
					<li><a href="#">sub2 first</a></li>
					<li><a href="#">sub2 second</a>
						<ul class="dropdown">
							<li><a href="#">sub3 first</a></li>
							<li><a href="#">sub3 second</a></li>
							<li><a href="#">sub3 third</a></li>
						</ul>
					</li>
				</ul>
				</li>
					<li><a href="#">sub2 third</a></li>
			</ul>
		</li>
		<li><a href="#">third</a></li>
		<li><a href="#">fourth</a></li>
		<li><a href="#">fifth</a></li>
	</ul>
</div>

菜单项宽度仅限css导航

2 个答案: