Re tlm ^^
pour continuer sur le tuto de menu déroulant CSS, j'ai mis en place un radius au niveau du <dd> pour que ca soit arrondi en bas a droite et a gauche. J'ai également mis un mini background avec hover lorsque l'on passe le curseur sur le lien. Mais j'aimerai que le dernier lien du sous-menu soit arrondi aussi ! J'ai essayer de mettre un "class" au <li> correspondant au dernier lien de chaque sous menu et de programmer mon radius dans cette class. Mais mon CSS ne le prend pas en compte (je ne suis pas sous IE ... qu'il crève ^^) !! Comment faire pour que mon dernier <li> de chaque sous menu prenne en compte le radius ???
Merci d'avance à tous !
7 réponses
Tout d'abord c'est Nairolf :P. Ensuite oui j'ai testé et même proposé un exemple, j'allais pas te filer un truc qui peu contenir un bug, ensuite pour ton problème:
A la place de:
#menu_upper dd ul:last-child
{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#menu_upper dd ul li:last-child
{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}Tu met:
#menu_upper dd ul li:last-child a
{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}En fait mon code est utile si il n'y a pas de liens, et pour toi il faut faire certaines modifications vu que tu as des liens. Mais normalement tout est ok.
Tu peux toujours utiliser les z-index, donc tu met un z-index assez élevé (999 par exemple) pour ton menu, et même si il est en relative, il passera toujours au dessus de ton image ou autre contenu.
Si c'est de ce tutoriel dont tu parles, alors voilà pour toi:
Exemple
Ici le code complet, même si tu as juste à enregistrer la page pour l'avoir:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background: #eee; margin: 0; padding: 0; }
#menu { background: #97c740; height: 40px; }
#menu dl { display: block; float: left; height: 40px; margin:0; padding: 0; }
#menu dl:hover dd { display: block; }
#menu dt { border-right: solid 1px #6B8C30; color: #FFF; cursor: pointer; display: block; height: 40px; line-height: 40px; text-align: center; width: 150px; }
#menu dd { display: none; margin:0; padding: 0; }
#menu dd ul { background: #d9dde9; border-bottom: solid 1px #C4C6CC; border-left: solid 1px #C4C6CC; border-right: solid 1px #C4C6CC; list-style: none; margin: 0; padding: 0; text-align: center; }
#menu dd ul li { border-top: solid 1px #C4C6CC; display: block; height: 30px; line-height: 30px; }
#menu dd ul li:hover { background: #949494; }
#menu dd ul li a { color: #949494; text-decoration: none; }
#menu dd ul li:hover a { color: #d9dde9; }
/* Important */
#menu dd ul:last-child { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
#menu dd ul li:last-child { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
/* Style en plus */
#menu dl:hover dt { background: #88B33B; color: #D5FA93; -moz-box-shadow:0px -5px 5px 2px #6B8C30; -webkit-box-shadow:0px -5px 5px 2px #6B8C30; box-shadow:0px -5px 5px 2px #6B8C30;}
</style>
</head>
<body>
<div id="menu">
<dl>
<dt>Menu 1</dt>
<dd>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>Menu 2</dt>
<dd>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>Menu 3</dt>
<dd>
<ul>
<li><a href="#">Lien 1</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>J'ai modifié le background des balises <dd> pour que ça soit plutôt sur <li> (sinon le li a bien un border-radius, mais il y a le background du <dd> derrière), et utiliser un :last-child pour que ça soit le dernier <li> qui a le border-radius. Enfin j'espère que le code t'aidera.
solow à l'instant
Merci à Nolrolf de ta réponse J'ai tester le code que tu m'as donner et il fonctionne exactement comme prévu (normal tu as dû le tester avant ^^) ! Mais quand j'essaye de l'adapter à mon CSS ca ne marche pas !! je vous montre mon code pour y voir plus claire et que tu me dise où j'ai raté mon coup...
Voici mon code HTML :
<div id="container_menu">
<div id="menu_upper">
<dl>
<a href="#"><dt>Hommes</dt></a>
<dd>
<ul>
<li><a href="#">tee-shirts</a></li>
<li><a href="#">sweats</a></li>
<li><a href="#">pantalons</a></li>
<li><a href="#">chaussures</a></li>
</ul>
</dd>
</dl>
<dl>
<a href="#"><dt>Femmes</dt></a>
<dd>
<ul>
<li><a href="#">tee-shirts</a></li>
<li><a href="#">sweats</a></li>
<li><a href="#">pantalons</a></li>
<li><a href="#">chaussures</a></li>
</ul>
</dd>
</dl>
<dl>
<a href="#"><dt>Enfants</dt></a>
<dd>
<ul>
<li><a href="#">tee-shirts</a></li>
<li><a href="#">sweats</a></li>
<li><a href="#">pantalons</a></li>
<li><a href="#">chaussures</a></li>
</ul>
</dd>
</dl>
<dl>
<a href="#"><dt>Accessoires</dt></a>
<dd>
<ul>
<li><a href="#">Colliers</a></li>
<li><a href="#">Bracelets</a></li>
<li><a href="#">Casquettes</a></li>
<li><a href="#">Bandanas</a></li>
</ul>
</dd>
</dl>
<dl>
<a href="#"><dt>Soldes</dt></a>
<dd>
<ul>
<li><a href="#">-10%</a></li>
<li><a href="#">-20%</a></li>
<li><a href="#">-25%</a></li>
<li><a href="#">-50%</a></li>
</ul>
</dd>
</dl>
</div>
</div>Voici mon code CSS :
#container_menu
{
width:1000px;
height:30px;
position: relative;
font-weight : bold;
background-image: url(images/background/background_menu.png);
background-repeat:no-repeat;
color: #ffffff;
}
#menu_upper
{
position:abolute;
padding: 0px 12.5px 0px 12.5px;
}
dl
{
height:30px;
width:195px;
margin:0;
padding:0;
display:block;
float:left;
font-family:candara;
}
dt
{
display:block;
height:30px;
width:195px;
color:#ffffff;
line-height:30px;
text-align:center;
font-family:candara;
}
dt
{
-moz-border-radius: 20px 20px 0px 0px;/* Firefox */
-webkit-border-radius: 20px 20px 0px 0px; /* Safari, Google Chrome */
border-radius: 20px 20px 0px 0px; /* IE9, Opera */
}
ul
{
-moz-border-radius: 20px 20px 0px 0px;/* Firefox */
-webkit-border-radius: 20px 20px 0px 0px; /* Safari, Google Chrome */
border-radius: 20px 20px 0px 0px; /* IE9, Opera */
}
dd
{
font-style:candara;
display:block;
margin:0px;
padding:0px;
background-color:#a7a6a6;
-moz-border-radius: 0px 0px 10px 10px;/* Firefox */
-webkit-border-radius: 0px 0px 10px 10px; /* Safari, Google Chrome */
border-radius: 0px 0px 10px 10px; /* IE9, Opera */
}
dd ul
{
margin:0px;
padding:0px;
text-align:center;
list-style:none;
font-family:candara;
}
dd ul li
{
display:block;
margin:0px;
padding:0px;
font-family:candara;
}
dd ul li a
{
color:#ffffff;
display:block;
text-decoration:non;
height:30px;
line-height:30px;
font-family: Candara;
}
dd ul li a:hover
{
background-image: url(images/background/background_menu_select.png);
background-repeat: no-repeat;
color: #000000;
background-position:center;
font-family: Candara;
}
dl dd
{
display:none;
}
dl:hover dd
{
display:block;
}
dt:hover
{
background-image: url(images/background/background_menu_select.png);
background-repeat:no-repeat;
color: #000000;
background-position:center;
font-family: Candara;
}
#menu_upper dd ul:last-child
{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#menu_upper dd ul li:last-child
{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}Merci pour tout ;)
Alors tout d'abord pardon Nalrolf excuse moi d'avoir mal écrit ton nom ^^ Je code et répond au téléphone pour le boulot en même temps et j'ai pas été attentif ! Maintenant je te remercie beaucoup pour ton aide ! Ca marche bien évidement ! Je profite de tes connaissances pour te poser une dernière question ... j'ai mis une balise <img> juste apres mon div de menu... Jusque là ca va, dans le tuto ils expliquent comment faire pour que le sous menu passe au dessus. Problème c'est dès que j'essaye de mettre des attributs CSS (dans la balise ou via l'attribution d'un <div>) le sous menu passe en dessous systématiquement.. Sais tu pourquoi et s'il y a une alternative pour que je puisse positionner mon image comme je veux (j'aimerai faire un "position:relative" et un "top:10px"...). J'ai essayer avec l'attribution d'une class dans la balise "img" mais ca ne marche vraiment pas dès le moment où je lui attribut du CSS...
Merci encore pour ton aide, je comprends mieu mon erreur, je valide ta réponse en tout cas ;)