Menu horizontal en CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu horizontal en CSS

vince351

Mon bateau : vince352

Bonjour à tous,

Je suis en train de faire un menu horizontal déroulant à base d'image et de CSS.

voila le rendu :

lorsque la souris est sur catalogue :

lorsque la souris est sur un des sous items de catalogue :

Mon problème est que lorsque la souris est sur un des sous items (cas de l'image 2), je voudrais que l'image reste sur "Catalogue" comme pour la première image. Je me demande si c'est possible avec des CSS :roll: .

le code HTML :

Code :

<div id="menu">
<ul>
<li><a href="../index.php">Accueil</a></li>
<li><a rel="dropmenu1" href="../toutesLesOffres.php">Catalogue</a>
<ul>
<li><a href="#t">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="../monEspace.php">MON ESPACE</a></li>
<li><a href="../Communaute/index.php">COMMUNAUTE</a></li>
<li><a href="../forum/index.php">Forum</a></li>
<li><a href="../faq.php">FAQ</a></li>
</ul>
</div>

le CSS :

Code :

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
color: #FFFFFF;
}
#menu li a {
background-image: url(images/menuFond.png);
background-position: center bottom;
clear:none;
width: 130px;
height:26;
display:block;
color: #257708;
text-decoration: none;
text-transform: uppercase;
clip: rect(auto,auto,auto,auto);
text-align: center;
font-size: 18px;
padding-top: 9px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
font-weight: bold;
}
#menu li a:hover {
background-image: url(images/boutonVert.png);
background-repeat: no-repeat;
color: #FFFFFF;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu ul li ul li a {
background-image:none;
color:#000;
background-color:#090;
font-size: 12px;
}
#menu ul li ul li a:hover {
background-image:none;
color:#FFF;
}
#menu li ul {
position:absolute;
}

Quelqu'un à une idée ?

Publicité

nico2302

je te met mon post en lien, peu-etre que cela va t'aider
http://forum.hardware.fr/hfr/Progr [...] 7244_1.htm

gatsu35

Blablaté par Harko

c'est sur le li:hover a qu'il faut style et non pas le li a:hover
et donc tu vas devoir mettre une clase sur ton a de premier niveau

---------------
Blablaté par Harko

FORUM HardWare.fr

Programmation

HTML/CSS

Menu horizontal en CSS

Sujets relatifs
défilement horizontal avec la pté CSS overflow	Ouvrir un menu qui contient un page html
[résolu] Probleme alignement menu sous Firefox	Alignement de texte à droite CSS
Galerie html, avec scroll bar horizontal ...	CSS pas pris en compte + question sur firebug
menu déroulant - problème positionnement bloc	Problème menu horizontal CSS
Menu horizontal depliant en CSS : Bug sous IE7	[CSS] Menu horizontal 1 ligne style www.macromedia.com ???
Plus de sujets relatifs à : Menu horizontal en CSS

Page générée en 0.042 secondes