如何强制嵌套列表项目的宽度与父列表项目相同？

Question

我有一个水平父母列表。一些列表项目单击时会显示一个嵌套的垂直列表。如何强制垂直子列表中的项目与父列表项目的宽度相同？

参见jsFiddle。

HTML：

<ul class="mainMenu horizontalMenu bulletless fullWidth bold"> 
    <li class="showSubMenu"> 
     <div>Resumes &amp; Cover Letters &#x25BE; </div> 
     <ul class="mainSubMenu bulletless"> 
      <li><a>Resumes</a></li> 
      <li><a>Cover Letters</a></li> 
      <li><a>Interviews</a></li> 
     </ul> 
    </li><li><a>Other Link</a> 
    </li><li><a>Other Link</a></li> 
</ul>​ 

CSS：

.horizontalMenu li{  
    display: inline-block; 
} 
.mainMenu > li{ 
    border: 1px solid black; 
} 
.mainMenu a, .mainMenu div{ 
    display: block; 
    padding: 10px 20px; 

} 
.mainSubMenu{ 
    position: absolute; 
} 

Answer 1

我做你的摆弄的变化。 http://jsfiddle.net/BXnxc/2/

家长里需要有position:relative;和嵌套子菜单中有通过继承包含结构的宽度有width:100%;和position:absolute;

Answer 2

您可以通过指定父LI为相对和儿童UL做到这一点width: 100%

演示：http://jsfiddle.net/BXnxc/3/

.horizontalMenu li {  
    position: relative; 
} 
.horizontalMenu li ul {  
    width: 100%; 
} 

Answer 3

你也可以做到这一点。我将mainMenu div设置为200px的宽度，然后width：继承mainSubMenu。

http://jsfiddle.net/BXnxc/4/

.mainMenu a, .mainMenu div{ 
    display: block; 
    padding: 10px 20px; 
    width:200px; 
} 
.mainSubMenu{ 
    position: absolute; 
    width:inherit; 
} 

.mainSubMenu li 
{ 
    display: block; 
    border: 1px solid grey; 
    width:inherit; 
}