菜單的子菜單寬度繼承父寬度

Question

我有一個子菜單菜單，我希望子菜單繼承它的<li>的菜單。 例如admin的子菜單將會像admin那樣的寬度，而home的子菜單將會在寬度上與管理寬度不同，它將會像寬度爲home。

這是菜單：http://jsfiddle.net/2fDQz/5/（子菜單中home和admin）

CSS（儘管你可以看到它的的jsfiddle）：

body { 
} 
/* Base Styles */ 
#personalbar ul, 
#personalbar li, 
#personalbar a { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    line-height: 1; 
    font-family: 'Lato', sans-serif; 
} 
#personalbar { 
    border: 1px solid #123e3f; 
    width: auto; 
} 
#personalbar ul { 
    zoom: 1; 
    background: #33b3b7; 
    background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f)); 
    background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    background: linear-gradient(top, #33b3b7 0%, #288c8f 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0); 
    padding: 5px 10px; 
} 
#personalbar ul:before { 
    content: ''; 
    display: block; 
} 
#personalbar ul:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
#personalbar li { 
    float: left; 
    margin: 0 5px 0 0; 
    border: 1px solid transparent; 
    position:relative; 
} 
#personalbar li a { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    padding: 8px 15px 9px 15px; 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border: 1px solid transparent; 
    font-size: 16px; 
} 
#personalbar li.active { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid #33b3b7; 
} 
#personalbar li.active a { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    display: block; 
    background: #1d6567; 
    border: 1px solid #123e3f; 
    -moz-box-shadow: inset 0 5px 10px #123e3f; 
    -webkit-box-shadow: inset 0 5px 10px #123e3f; 
    box-shadow: inset 0 5px 10px #123e3f; 
} 
#personalbar li:hover { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid #33b3b7; 
} 
#personalbar li:hover a { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -ms-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
    display: block; 
    background: #1d6567; 
    border: 1px solid #123e3f; 
    -moz-box-shadow: inset 0 5px 10px #123e3f; 
    -webkit-box-shadow: inset 0 5px 10px #123e3f; 
    box-shadow: inset 0 5px 10px #123e3f; 
} 
#personalbar ul ul li:hover a , 
#personalbar li:hover li a 
{ 
    background: none; 
    border: none; 
    color: #666; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
} 
#personalbar ul ul a:hover 
{ 
    background: #7d7d7d; 
    color: #fff !important; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
} 
#personalbar li:hover > ul { 
    display: block; 
} 
#personalbar ul ul 
{ 
    position:absolute; 
    z-index: 1000; 
    display: none; 
    margin: 0; 
    padding: 0; 
    width: inherit; 
    top: 35px; 
    left: 0; 
    background: #ffffff; 
    border: solid 1px #b4b4b4; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
} 
#personalbar ul ul li { 
    position: relative; 
    float: none; 
    margin: 0; 
    padding: 3px; 
} 

HTML：

<div id='personalbar'style="position:absolute; top:0%;left:0%; width:100%;"> 
<ul> 
    <li><a href='# '><span>Home</span></a> 
    <ul> 
    <li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a></li> 
    <li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a></li> 
    </ul></li> 
    <li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a></li> 
    <li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a></li> 
    <li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a> 
    <ul> 
    <li runat="server"><a href="#" runat="server"><span>bla</span></a></li> 
    <li runat="server"><a href="#" runat="server"><span>bli</span></a></li> 
    </ul> 
    </li> 
    <li id="L3" runat="server" style="position:absolute; right:1%;" ><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a></li> 
</ul> 
</div> 

Answer 1

你可以給寬度：100％到子菜單，它會工作

<div id='personalbar'style="position:absolute; top:0%;left:0%; width:100%;"> 
<ul> 
    <li><a href='# '><span>Home</span></a> 
    <ul style="width:100%"> 
    <li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a></li> 
    <li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a></li> 
    </ul></li> 
    <li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a></li> 
    <li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a></li> 
    <li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a> 
    <ul style="width:100%"> 
    <li runat="server"><a href="#" runat="server"><span>bla</span></a></li> 
    <li runat="server"><a href="#" runat="server"><span>bli</span></a></li> 
    </ul> 
    </li> 
    <li id="L3" runat="server" style="position:absolute; right:1%;" ><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a></li> 
</ul> 
</div> 

更新小提琴：http://jsfiddle.net/ankur1990/2fDQz/9/