Menu horizontal en CSS

Menu horizontal en CSS - HTML/CSS - Programmation

Marsh Posté le 24-01-2010 à 12:34:23    

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>
  12.   </li>
  13.  
  14.   <li><a href="../monEspace.php">MON ESPACE</a></li>
  15.  
  16.   <li><a   href="../Communaute/index.php">COMMUNAUTE</a></li>   
  17.  
  18.   <li><a href="../forum/index.php">Forum</a></li>
  20.   <li><a href="../faq.php">FAQ</a></li>
  21. </ul>
  22. </div>


 
le CSS :

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


 
Quelqu'un à une idée ?

Reply

Marsh Posté le 24-01-2010 à 12:34:23   

Reply

Marsh Posté le 25-01-2010 à 10:07:01    

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

Reply

Marsh Posté le 25-01-2010 à 10:22:15    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed