İç içe geçmiş liste öğelerini ana liste öğesiyle aynı genişliğe nasıl zorlarım?

Question

Yatay üst öğe listem var. Bazı liste öğeleri tıklandığında yuvalanmış bir dikey liste görüntüler. Dikey alt listesindeki öğeleri ana liste öğesiyle aynı genişlikte nasıl zorlayabilirim?

Bkz. 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:

Sen ile göreli ve çocuk UL olarak ebeveyn LI belirterek yapabilirsiniz

.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

Ben senin kemençede değişti. http://jsfiddle.net/BXnxc/2/

ebeveyn li position:relative; olması gerekir ve iç içe alt içeren yapıların genişliği miras yoluyla width:100%; ve position:absolute;

Answer 2

width: 100%

Demo:http://jsfiddle.net/BXnxc/3/

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

Answer 3

Ayrıca yapabilirsiniz sahip olmalıdır. MainMenu div'unuzu 200px genişliğe ve daha sonra genişliğe ayarlıyorum: mainSubMenu için miras alın.

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