如何強制嵌套列表項目的寬度與父列表項目相同？

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