Bonjour,
merci pour l'aide apportée.
Voilà le css utilisé :
body {
font-size: 11px;
height: auto;
padding-bottom: 20px;
font-family : Arial, Helvetica, sans-serif;
overflow-x:hidden;
background-color: #CCC;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color:#00F;
text-decoration: underline;
}
.container_24 {
margin-left: auto;
margin-right: auto;
width: 960px;
height: 200px;
border:1px solid #fff;
-moz-box-shadow: 2px 2px 3px #aaa;
-webkit-box-shadow: 2px 2px 3px #aaa;
box-shadow: 2px 2px 3px #555;
border-radius: 5px 5px 5px 5px;
margin-bottom: 20px;
background-color:#0FF;
}
/*Emplacement zone chemin ariane*/
.ca_zone_ariane{
position:relative;
width:100%;
z-index:0;
}
.ca_wrap_ariane{
position:absolute;
display:table-cell;
vertical-align:middle;
text-align:center;
z-index:0;
}
.ca_zone4{
top:10px;
left:160px;
}
/*Dimensions zone chemin ariane*/
.ca_wrap4{
width:620px;
height:20px;
border:1px solid #fff;
-moz-box-shadow: 2px 2px 3px #aaa;
-webkit-box-shadow: 2px 2px 3px #aaa;
box-shadow: 2px 2px 3px #555;
text-align:left;
padding-left: 10px;
vertical-align:central;
border-radius: 5px 5px 5px 5px;
}
.oldie .ca_wrap4{ /* Pour IE6, IE7 et IE8 */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, Direction=135, Strength=3);
zoom: 1;
}
/* --------------------- */
/* Menu */
/* --------------------- */
/*Emplacement zone menu*/
.zone_menu{
position:relative;
top:0px;
left:160px;
z-index:1;
}
/*Dimensions zone menu*/
.contenu_menu{
width:630px;
height:40px;
border:1px solid #fff;
-moz-box-shadow: 2px 2px 3px #aaa;
-webkit-box-shadow: 2px 2px 3px #aaa;
box-shadow: 2px 2px 3px #555;
border-radius: 5px 5px 5px 5px;
}
.oldie .zone_menu .contenu_menu{ /* Pour IE6, IE7 et IE8 */
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=3);
zoom: 1;
}
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial */
font-size : 12px; /* hauteur du texte : 12 pixels */
margin-top:9px; /* on fixe l'espace avec le haut du conteneur */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 125px; /* largeur */
background : #A1B5C1; /* Couleur du fond, actuellement = blanc */
border: #000 solid 1px;
}
#menu li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #000; /* on met une bordure noire à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #F2F2F2; /* on met une bordure grise en haut de chaque élément d'une sous-liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #F2F2F2 ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète [cligne] */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #00F; /* On passe le texte en bleu ... */
background: #CCC; /* ... et au contraire, le fond en gris */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#menu .transparent{
background:none; /* on ne met pas de couleur en fond sur les titres principaux */
border:none;
}
Et voilà le html :
<!-- début conteneur -->
<div class="container_24">
<!-- début menu -->
<div class="zone_menu">
<div class="contenu_menu">
<ul id="menu">
<li>
<a href="" title="" class="transparent">Rubrique 1</a>
<ul>
<li>
<a href="" title="">Rubrique 1.1</a>
</li>
<li>
<a href="" title="">Rubrique 1.2</a>
</li>
</ul>
</li>
<li>
<a href="" title="" class="transparent">Rubrique 2</a>
<ul>
<li>
<a href="" title="">Rubrique 2.1</a>
</li>
<li>
<a href="" title="">Rubrique 2.2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- fin menu -->
<!-- debut chemin ariane-->
<div class="ca_zone_ariane ca_zone4">
<div class="ca_wrap_ariane ca_wrap4">
<a href="">Accueil</a>
> <a href="">Rubrique mère</a>
> <strong class="on">Page en cours</strong>
</div>
</div>
<!-- fin chemin ariane-->
</div>
<!-- fin conteneur -->
D'avance merci
.