ネストされたリスト項目を親リスト項目と同じ幅にするにはどうすればよいですか？

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：

あなたは相対し、子 ULとして親 LIを指定することでこれを行うことができます

.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

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