css - 如何更改 CSS 子菜单宽度，使其不使用与主菜单相同的宽度？

Question

我目前通过与 ul > li > ul > lu 合作来使用 CSS 子菜单。我当前的 CSS 代码正在使用:

#nav li:hover ul.sub 
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; width:100%; height:auto;}

顶部菜单的宽度是找到的，但在子菜单中，它使用顶部菜单的原始宽度值。如果我将宽度更改为 325%，则子菜单足够宽，但顶部菜单太宽。

我一直在搞乱 CSS 格式，但似乎无法让子菜单保持其自己的 100% 宽度值与顶部菜单分开。

有没有人有关于如何使用 100% 宽度来匹配其内容而不是顶部菜单的值的解决方案？

如果有人想看我的意思，可以看这里: http://

我目前将其设置为 100% 宽度以向您显示子菜单的结果。

Answer 1

设置子菜单ul的宽度为auto

然后将white-space:nowrap应用到子菜单li。

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
a {
  text-decoration: none;
  padding: 0.5em;
  display: block;
}
li {
  background: orange;
  display: inline-block;
}
nav > ul {
  background: lightblue;
}
nav > ul > li {
  position: relative;
}
nav > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  width:auto;
}
nav > ul > li > ul li {
  display: block;
  white-space: nowrap;
  background: #000;
}

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Clients</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>