子菜單100％菜單寬度

Question

我的主菜單下方顯示一個子菜單。 主菜單是固定寬度，我希望子菜單是主菜單的100％寬度。 子菜單可以包含任意數量的鏈接，我希望子菜單的寬度按比例更改。 這可能嗎？ 這是我的代碼：

小提琴

的CSS

#nav a{
width: 115px;
height: 15px;
text-decoration:none;
display:block;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
color:#666666;
border: 1px solid green;
float: right;
padding: 10px 5px 5px 5px;
z-index: 2000;
}

#nav a li{
width: 115px;
height: 15px;
}

#nav:last-child {
border-right: 1px solid #999999; 
}

#nav a:active, #nav a:hover, #nav a:focus {
background: #999 ;
}
#nav li { 
display:block;
float:left;
}
#nav li:last-child {
border-right: 1px solid #999999; 
}
#nav li ul { 
display: table;
height: 30px;
position: absolute;
left: -9999px;
}
#nav li:hover ul {
left: 0; 
top: 30px; 
}
#nav li li {
display: table-cell;
}
#nav li li a{
text-decoration:none;
display:block;
font-size:9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #999999; 
color:#666666;
z-index: 10000;
padding: 5px 5px 10px 5px;
}

的HTML

<ul id="nav">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a>
    <ul>
    <li><a href="#">LINK3 <br> MORE TEXT</a></li>
    <li><a href="#">LINK4</a></li>
    <li><a href="#">LINK5</a></li>
    <li><a href="#">LINK6</a></li>
    </ul></li>
<li><a href="#">LINK7</a></li>
<li><a href="#">LINK2</a>
    <ul>
    <li><a href="#">LINK3 <br> MORE TEXT</a></li>
    <li><a href="#">LINK4</a></li>
    <li><a href="#">LINK5</a></li>
    <li><a href="#">LINK6</a></li>
    <li><a href="#">LINK5</a></li>
    </ul></li>
</ul>

謝謝！

Answer 1

我不知道我是否明白這個問題。

您需要將兩個菜單都包裝在div中。 然后，如果subnav具有100％的寬度，它將采用該div的寬度。

你有鏈接嗎？ 如果我能明白您的意思，我會進一步提供幫助。

Answer 2

#nav li適用於#nav內部的所有li ，即使li向下幾層。 也就是說-子菜單li仍被視為#nav li 。 要覆蓋該規則，請將#nav li li設置為width:auto !important; 或者其他的東西。

但是要完成您實際想要做的（我認為），請嘗試添加以下內容：

#nav
{
width:660px;
position:relative;
}

#nav ul
{
display:table;
width:100%;
position:absolute;
top:30px;
}