Wie erzwinge ich, dass verschachtelte Listenelemente die gleiche Breite wie das übergeordnete Listenelement haben?

Question

Ich habe eine horizontale Elternliste. Einige der Listenelemente zeigen beim Klicken eine verschachtelte vertikale Liste an. Wie erzwinge ich, dass die Elemente in der vertikalen Unterliste die gleiche Breite wie das übergeordnete Listenelement haben?

Siehe 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

habe ich die Änderung auf Ihrer Geige. http://jsfiddle.net/BXnxc/2/

Die Mutter li muss position:relative; und das verschachtelte Untermenüs haben muss width:100%; und position:absolute;

Answer 2

Sie können dies tun, indem die übergeordnete LI als relative Angabe und Kind UL mit width: 100%

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

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

Answer 3

Sie können auch dies tun, indem Sie die Breite der enthaltenden Strukturen erben. Ich setze dein mainMenu div auf eine Breite von 200px und dann width: vererbe für das 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; 
}