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
Vous devez vous connecter pour publier un commentaire.
Supprimer la largeur que vous avez ajouté:
Le problème maintenant est que le
ul.sub-menu
's de dimension sont basés sur c'estrelative
parent<li>
. L'astuce ici est d'utiliserwhite-space: nowrap
de le pousser hors de ses parents dimensions. Ensuite, utilisezmin-width
pour définir la largeur minimum autorisé (ou comme vous l'avez dit "au moins la largeur des parents").Le problème est que vous êtes de remettre les choses à l'échelle mondiale. Par exemple:
#menu1 ul.menu li { position: relative; float: left; list-style-type: none; }
. Qui aura un effet sur TOUS les<li>
. À vous fixer problème particulier (ou de le dissimuler):.sub-menu li { float: none !important; }
.Cela semble fonctionner parfaitement, merci beaucoup!
OriginalL'auteur John Smith