Jak wymusić, aby elementy listy zagnieżdżonej miały taką samą szerokość jak element listy nadrzędnej?

Question

Mam poziomą listę nadrzędną. Niektóre elementy listy wyświetlają zagnieżdżoną listę pionową po kliknięciu. Jak wymusić, aby pozycje na pionowej liście podrzędnej miały taką samą szerokość jak element listy nadrzędnej?

Zobacz 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

zrobiłem zmianę na swoim skrzypcach. http://jsfiddle.net/BXnxc/2/

Rodzic li musi mieć position:relative; i zagnieżdżonych podmenu musi mieć width:100%; i position:absolute;

Answer 2

Można to zrobić poprzez określenie rodzica LI jako względne i dziecka UL z width: 100%

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

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

Answer 3

Można też to zrobić przez dziedziczenie szerokość struktur zawierających. Ustawiam div mainMenu na szerokość 200px, a następnie szerokość: dziedziczę dla 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; 
}