Html 使嵌套CSS菜单响应（100%宽度）

我已经做了菜单：

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 111</li>
            <li>Menu 22</li>
            <li>Menu 3333</li>
            <li>Menu 44
            <ul class="nav">
                <li>Menu 111111</li>
                <li>Menu 22</li>
                <li>Menu 3333</li>
                <li>Menu 44</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>Menu 2222</li>
    <li>Menu 33</li>
    <li>Menu 4444444</li>
</ul>

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }

#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}

#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000; text-decoration:none;}

#nav .nav li { width: 100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid;
border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:100%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }

菜单1

菜单111
菜单22
菜单3333
菜单44

菜单111111
菜单22
菜单3333
菜单44




菜单2222
菜单33
菜单444

#导航，.nav，#nav.nav li{边距：0px；填充：0px；}
#导航li{浮动：左；显示：内联；光标：指针；列表样式：无；填充：0px 10px 0px 10px；边框：1px#000实体；位置：相对；}
#nav li ul.first{左：-1px；顶：100%；}
李，李{颜色：#000；文字装饰：无；}
#nav.nav li{宽度：100%；文本缩进：10px；行高：30px；右边距：10px；边框顶部：1px#000实心；边框底部：1px#000实心；
左边框：无；右边框：无；背景：#fff；}
#导航li a{显示：块；宽度：继承；高度：继承；}
ul.nav{显示：无；}
#导航li:hover>a，#导航li:hover{color:#fff；background:#000；}
li:hover>.nav{显示：块；位置：绝对；宽度：200px；顶部：-2px；左侧：100%；z索引：1000；边框：1px#000实心；}
li:hover{position:relative；z-index:2000；}

缺少两件事：

• 在子菜单中导航时，我希望列的宽度与最宽的项的宽度相同（就像它是一个表）
• 共有4个主列，它们的宽度应为25%25%25%，因此自动拉伸浏览器窗口。但我不想手动设置这些宽度（可以有更多菜单）

---

将父元素

#nav

设置为

display:table

，将直接

li

子元素设置为

display:table cell

。同样，您可以将

width:1%

添加到子

li

元素，以强制它们具有相同的宽度

请参阅更新的CSS以了解所做的其他更改：

#nav {
    display:table;
}
#nav > li {
    cursor:pointer;
    list-style:none;
    padding:0px 10px 0px 10px;
    border:1px #000 solid;
    position:relative;
    display:table-cell;
    width:1%;
}
#nav ul li {
    width: 100%;
    display:block;
    text-indent:10px;
    line-height:30px;
    margin-right:10px;
    border-top:1px #000 solid;
    border-bottom:1px #000 solid;
    border-left:none;
    border-right:none;
    background:#fff;
    position:relative;
}
ul {
    display:none;
}
li:hover > ul {
    display:block;
    position:absolute;
    z-index:1000;
    border:1px #000 solid;
    left:0;
}
#nav > li ul li ul {
    left:100%;
    top:-2px;
    white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
    color:#fff;
    background:#000;
}
li, li a {
    color:#000;
    text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}

---

您是否考虑过使用display:table作为第二个表（缺少第二个表）？：）@JohnSmith子菜单在我看来很好-这就是我得到的：@Danko谢谢-我不知道你可以这样做：）更新。@JohnSmith你是说你不想让它们继承宽度？我不确定我是否理解你；让我知道吧——我很高兴能把它修好。@JohnSmith我的错——我误解了你；这应该是你想要的：如果不是，请告诉我。@JohnSmith它在Chrome中工作，我认为它很好。我更新了它；它现在也在FF中工作-