Question

我已经做了一个菜单：

<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; }

http://jsfiddle.net/L8VPk/

缺少两件事：

在子菜单中导航时，我希望该列与最宽的项目一样宽（所以就像所有表格一样）
有4个主要列，它们应该有25％25％25％25％宽度，因此自动拉伸浏览器窗口。但我不想手动设置这些宽度（并且可以有更多菜单）

Answer 1

将父元素#nav设置为display:table，将直接li子元素设置为display:table-cell。作为@Danko points out，您可以将width:1%添加到子li元素，以强制它们具有相等的宽度。

EXAMPLE HERE

有关所做的其他更改，请参阅更新的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;}

使嵌套的CSS菜单响应（100％宽度）

1 个答案: