html - 菜单的子菜单宽度继承它的父宽度

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

你可以给子菜单width: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>

更新 fiddle :http://jsfiddle.net/ankur1990/2fDQz/9/