CSS下拉菜单-不直接子菜单大小

我正在制作一个css水平导航菜单。 如何使子菜单宽度自动调整到其内容？ 就像主菜单一样

我的css：

文本只是向下折叠

编辑：和html

尝试以下操作：

#nav ul a {
        display: block;
        height:25px;
        padding: 0 20px;/*changeto width for static size*/
        line-height:25px;
        background: rgba(24,24,24,1.0);
        /* text-align:center; */
        border: 1px solid grey;
        border-radius: 0px 0px 0px 0px;
        width: 100%;
}

---

不确定这是否能纠正您的问题，但实际上，唯一真正的问题是您有一个明确的高度设置。

高度：25px是导致版本号溢出其容器的原因。它们是由于父级
li
而产生的宽度。块级元素默认为
100%
ish宽度。（特别是在填充方面存在一些差异，如果要将块元素重置回其默认值，可以使用
width:auto
）。不幸的是，所有这些都无助于你。
position:absolute
元素试图在宽度上匹配其父元素。您可以做的两件事是删除
高度：25px
，并允许
行高度：25px
保持您的高度（这将导致所有文本都位于
li
，但它们的宽度仅与父
li
相同），或者您可以给
li一个
空白：nowrap
。我个人更喜欢第二种方法。您可能会遇到的错误是长标题由于缺少包装（显然）而在屏幕外结束。以下是规则和演示：

（检查项目2.2.2）

需要更多的代码。这就是CSS。我们还需要标记，最好在编辑器中使用代码段（Ctrl-m）。@JosephMarikle刚刚添加了它：）太棒了！谢谢！！=）我还加了：#nav ul li{width:100%；}以使它们更加均匀
#nav ul a {
    display: block;
    /*height:25px;*/ /* remove this */
    padding: 0 20px;/*changeto width for static size*/
    line-height:25px;
    background: rgba(24,24,24,1.0);
    text-align:center;
    border: 1px solid grey;
    border-radius: 0px 0px 0px 0px;

    /* this one is optional, but I prefer it
       in most cases. */
    white-space:nowrap;
}