[RESOLU] <li> d'un sous menu qui s'affiche horizontalement

<li> d'un sous menu qui s'affiche horizontalement [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 25-09-2009 à 22:30:26    

Bonsoir,
 
Voila j'ai un soucis concernant un menu avec un sous menu. Le sous menu affiche les menu en ligne et non verticalement :
 
http://photoyop.free.fr/a/f.png
 
Avec ce code tout bête :
 

Code :
  1. <ul id="menu"> 
  2.     <li><a href="">Accueil</a></li> 
  3.     <li><a href="">Plaquette</a></li> 
  4.     <li><a href="">Planning</a></li> 
  5.     <li> 
  6.         <a href="">Les journaux</a> 
  7.         <ul> 
  8.             <li><a href="">Journal 1</a></li> 
  9.             <li><a href="">Journal 2</a></li> 
  10.         </ul> 
  11.     </li> 
  12.     <li><a href="">Localisation</a></li> 
  13.     <li><a href="">Nous contacter</a></li> 
  14. </ul>


 
Avec cette css :

Code :
  1. ul#menu{
  2.     height: 35px ;
  3.     margin: 0 ;
  4.     padding: 0 ;
  5.     background: url(images/bg_menu.gif) repeat-x 0 -25px ;
  6.     list-style-type: none ;
  7.     display:block;
  8. }
  9. ul#menu li{
  10.     float: left ;
  11.     text-align: center ;
  12. }
  13. ul#menu li a{
  14.     width: 145px ;
  15.     line-height: 25px ;
  16.     font-size: 1.2em ;
  17.     font-weight: bold ;
  18.     letter-spacing: 2px ;
  19.     color: #fff ;
  20.     display: block ;
  21.     text-decoration: none ;
  22.     border-right: 2px solid #dea ;
  23. }
  24. ul#menu li a:hover{
  25.     background: url(images/bg_menu.gif) repeat-x 0 0 ;
  26. }
  27. ul#menu li ul{
  28.     background: url(images/bg_menu.gif) repeat-x 0 -25px ;
  29.     position:absolute;
  30.     visibility:hidden;
  31.     padding:0;
  32.     list-style: none;
  33.     display:block;
  34. }
  35. ul#menu li:hover ul{
  36.     position:absolute;
  37.     visibility:visible;
  38. }
  39. ul#menu li ul li{    
  40. }
  41. ul#menu li ul li a{    
  42. }
  43. ul#menu li ul li a:hover{
  44. }


 
Pouvez vous m'aider ?  :sweat:


Message édité par Yop69 le 25-09-2009 à 23:07:32
Reply

Marsh Posté le 25-09-2009 à 22:30:26   

Reply

Marsh Posté le 25-09-2009 à 22:55:41    

Ok j'ai trouvé voici la correction toute bête mais perverse :
 
Juste cette classe :
ul#menu li ul li{
 display:block;
clear:both;
 background: url(images/bg_menu.gif) repeat-x 0 -25px;
}
 
La propriété clear:both permet d'outrepasser la propriété float: left ; défini plus haut dans la classe ul#menu li.
float: left décale tout le flux css suivant ses conditions c'est à dire, d'être en ligne et de faire afficher le flux sur la gauche.

Message cité 1 fois
Message édité par Yop69 le 25-09-2009 à 23:07:05
Reply

Marsh Posté le 26-09-2009 à 15:15:57    

Yop69 a écrit :

Ok j'ai trouvé voici la correction toute bête mais perverse :

 

Juste cette classe :
ul#menu li ul li{
 display:block;
clear:both;
 background: url(images/bg_menu.gif) repeat-x 0 -25px;
}

 

La propriété clear:both permet d'outrepasser la propriété float: left ; défini plus haut dans la classe ul#menu li.
float: left décale tout le flux css suivant ses conditions c'est à dire, d'être en ligne et de faire afficher le flux sur la gauche.


Falait juste redefinir le float à none et là pas besoin de ton clear :o


Message édité par gatsu35 le 26-09-2009 à 15:16:15

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

Marsh Posté le 26-09-2009 à 15:36:56    

C'est pas faux  :o  
Merci pour ta précision  ;)

Reply

Sujets relatifs:

Leave a Replay

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