Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1501 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu horizontal en CSS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu horizontal en CSS

n°1959997
vince351
Mon bateau : vince352
Posté le 24-01-2010 à 12:34:23  profilanswer
 

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 :
http://img682.imageshack.us/img682/5552/42118525.png
 
lorsque la souris est sur un des sous items de catalogue :
http://img193.imageshack.us/img193/9295/57381013.png
 
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 :
  1. <div id="menu">
  2. <ul>
  3.   <li><a href="../index.php">Accueil</a></li>
  4.  
  5.   <li><a  rel="dropmenu1" href="../toutesLesOffres.php">Catalogue</a>
  6.   <ul>
  7.       <li><a href="#t">Sous-item 1</a></li>
  8.       <li><a href="#">Sous-item 2</a></li>
  9.       <li><a href="#">Sous-item 3</a></li>
  10.     </ul>
  11.   </li>
  12.  
  13.   <li><a href="../monEspace.php">MON ESPACE</a></li>
  14.  
  15.   <li><a   href="../Communaute/index.php">COMMUNAUTE</a></li>   
  16.  
  17.   <li><a href="../forum/index.php">Forum</a></li>
  18.   <li><a href="../faq.php">FAQ</a></li>
  19. </ul>
  20. </div>


 
le CSS :

Code :
  1. #menu ul {
  2. margin:0;
  3. padding:0;
  4. list-style-type:none;
  5. text-align:center;
  6. }
  7. #menu li {
  8. float:left;
  9. margin:auto;
  10. padding:0;
  11. color: #FFFFFF;
  12. }
  13. #menu li a {
  14. background-image: url(images/menuFond.png);
  15. background-position: center bottom;
  16. clear:none;
  17. width: 130px;
  18. height:26;
  19. display:block;
  20. color: #257708;
  21. text-decoration: none;
  22. text-transform: uppercase;
  23. clip: rect(auto,auto,auto,auto);
  24. text-align: center;
  25. font-size: 18px;
  26. padding-top: 9px;
  27. padding-right: 0px;
  28. padding-bottom: 0px;
  29. padding-left: 0px;
  30. margin-top: 0px;
  31. margin-right: 0px;
  32. margin-bottom: 0px;
  33. margin-left: 20px;
  34. font-weight: bold;
  35. }
  36. #menu li a:hover {
  37. background-image: url(images/boutonVert.png);
  38. background-repeat: no-repeat;
  39. color: #FFFFFF;
  40. }
  41. #menu ul li ul {
  42. display:none;
  43. }
  44. #menu ul li:hover ul {
  45. display:block;
  46. }
  47. #menu li:hover ul li {
  48. float:none;
  49. }
  50. #menu ul li ul li a {
  51. background-image:none;
  52. color:#000;
  53. background-color:#090;
  54. font-size: 12px;
  55. }
  56. #menu ul li ul li a:hover {
  57. background-image:none;
  58. color:#FFF;
  59. }
  60. #menu li ul {
  61. position:absolute;
  62. }


 
Quelqu'un à une idée ?

mood
Publicité
Posté le 24-01-2010 à 12:34:23  profilanswer
 

n°1960156
nico2302
Posté le 25-01-2010 à 10:07:01  profilanswer
 

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

n°1960161
gatsu35
Blablaté par Harko
Posté le 25-01-2010 à 10:22:15  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu horizontal en CSS

 

Sujets relatifs
défilement horizontal avec la pté CSS overflowOuvrir un menu qui contient un page html
[résolu] Probleme alignement menu sous FirefoxAlignement de texte à droite CSS
Galerie html, avec scroll bar horizontal ...CSS pas pris en compte + question sur firebug
menu déroulant - problème positionnement blocProblè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


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR