CSS drop down menu - Faire des enfants, au moins la largeur des parents

J'ai trois niveaux CSS drop down menu qui fonctionne très bien, mais je suis actuellement en spécifiant une largeur réelle de la deuxième et troisième rang des éléments de liste. J'ai été bidouiller pendant des heures à essayer d'obtenir à regarder la façon dont je le veux, mais sans succès.

Ce que je voudrais, c'est pour les éléments dans le deuxième niveau pour avoir une largeur minimale égale à la largeur de son parent, et s'étend au-delà que la largeur si le contenu de l'article est plus long que le contenu de son parent.

J'aimerais aussi que les éléments dans le troisième niveau ont pas de largeur minimale, mais plutôt avoir une largeur de seulement la largeur du contenu de la plus longue de l'élément de liste pour imbriquée liste non ordonnée.

Mon code HTML et CSS est ici: http://jsfiddle.net/kBVYD/1/

Si vous préférez viens de voir le code, voici le code HTML:

<div id="menu1">
<ul class="menu">
<li><a class="haschild" title="" href="">Home</a>
<ul class="sub-menu">
<li><a class="haschild" title="" href="">Sub Link 1</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
<li><a title="" href="">Sub Link 2</a></li>
<li><a class="haschild" title="" href="">Sub Link 3</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="haschild" title="" href="">About Us</a>
<ul class="sub-menu">
<li><a title="" href="">Sub Link 1</a></li>
<li><a title="" href="">Sub Link 2</a></li>
<li><a class="haschild" title="" href="">Sub Link 3</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="haschild" title="" href="">Our Services Etc Etc Etc</a>
<ul class="sub-menu">
<li><a title="" href="">Sub Link 1</a></li>
<li><a class="haschild" title="" href="">Sub Link 2</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
<li><a class="haschild" title="" href="">Sub Link 3</a>
<ul>
<li><a title="" href="">Sub Sub Link 1</a></li>
<li><a title="" href="">Sub Sub Link 2</a></li>
<li><a title="" href="">Sub Sub Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>

Et voici le CSS:

#menu1 *
{
margin: 0;
padding: 0;
}
#menu1 ul.menu
{
float: left;
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
#menu1 ul.menu li
{
position: relative;
float: left;
list-style-type: none;
}
#menu1 ul.menu li a
{
position: relative;
display: block;
line-height: 21px;
font-size: 14px;
padding: 14px 21px;
text-decoration: none;
z-index: 100;
}
#menu1 ul.menu > li:first-child > a
{
border-left: 0;
}
#menu1 ul.menu > li:last-child > a
{
border-right: 0;
}
/** Sub Menu - Tier 2 **/
#menu1 ul.menu li ul.sub-menu
{
position: relative;
display: none;
margin: 0;
padding: 0;
}
#menu1 ul.menu li:hover ul.sub-menu
{
display: block;
float: left;
position: absolute;
z-index: 200;
}
#menu1 ul.menu li ul.sub-menu > li:first-child
{
margin: 5px 0 0 0;
}
#menu1 ul.menu li ul.sub-menu li a
{
width: 140px;
display: block;
}
#menu1 ul.menu li ul.sub-menu li:first-child > a
{
border-top: 0;
}
#menu1 ul.menu li ul.sub-menu li:last-child > a
{
border-bottom: 0;
}
/** Sub Menu - Tier 3 **/
#menu1 ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 100%;
}
#menu1 ul.menu li ul.sub-menu li ul li
{
margin: 0 0 0 5px;
}
#menu1 ul.menu li ul.sub-menu li:hover ul
{
display: block;
float: left;
position: absolute;
top: 0;
}
#menu1 ul.menu li ul.sub-menu li ul li a
{
width: 140px;
display: block;
}
/** Colour Styles **/
#menu1 ul.menu li a
{
background: #09F;
color: #FFF;
}
#menu1 ul.menu > li > a
{
border-left: 1px solid #26A8FF;
border-right: 1px solid #0082D9;
}
#menu1 ul.menu li:hover > a, #menu1 ul.menu li a:hover
{
color: #09F;
background: #ddd;
}
#menu1 ul.menu li ul.sub-menu li a
{
border-top: 1px solid #26A8FF;
border-bottom: 1px solid #0082D9;
}

OriginalL'auteur Jordan | 2012-12-08