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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU] <li> d'un sous menu qui s'affiche horizontalement

Yop69

Bonsoir,

Voila j'ai un soucis concernant un menu avec un sous menu. Le sous menu affiche les menu en ligne et non verticalement :

Avec ce code tout bête :

Code :

<ul id="menu">
    <li><a href="">Accueil</a></li>
    <li><a href="">Plaquette</a></li>
    <li><a href="">Planning</a></li>
    <li>
        <a href="">Les journaux</a>
        <ul>
            <li><a href="">Journal 1</a></li>
            <li><a href="">Journal 2</a></li>
        </ul>
    </li>
    <li><a href="">Localisation</a></li>
    <li><a href="">Nous contacter</a></li>
</ul>

Avec cette css :

Code :

ul#menu{
    height: 35px ;
    margin: 0 ;
    padding: 0 ;
    background: url(images/bg_menu.gif) repeat-x 0 -25px ;
    list-style-type: none ;
    display:block;
}
ul#menu li{
    float: left ;
    text-align: center ;
}
ul#menu li a{
    width: 145px ;
    line-height: 25px ;
    font-size: 1.2em ;
    font-weight: bold ;
    letter-spacing: 2px ;
    color: #fff ;
    display: block ;
    text-decoration: none ;
    border-right: 2px solid #dea ;
}
ul#menu li a:hover{
    background: url(images/bg_menu.gif) repeat-x 0 0 ;
}
ul#menu li ul{
    background: url(images/bg_menu.gif) repeat-x 0 -25px ;
    position:absolute;
    visibility:hidden;
    padding:0;
    list-style: none;
    display:block;
}
ul#menu li:hover ul{
    position:absolute;
    visibility:visible;
}
ul#menu li ul li{    
}
ul#menu li ul li a{    
}
ul#menu li ul li a:hover{
}

Pouvez vous m'aider ? :sweat:

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

Publicité

Yop69

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

gatsu35

Blablaté par Harko

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

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

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

Yop69

C'est pas faux
Merci pour ta précision

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
xml problème affichage dans Firefox	Probleme pour placer des éléments swing
[RESOLU]Optimisation d'une requête SQL	[AS] zoom avec un onMouseWheel sur plusieurs clip [RESOLU]
La JProgressBar ne m'affiche pas de bar de progression	[RESOLU]Debutant en C++, petite question a propos d'un programme
[Résolu] Hack CSS possible sur positionnement hauteur d'un div ?	[Resolu] Redimensionner image avec haut et larg max
[Resolu]Problème formulaire	[RESOLU] Sous Eclipse l'exécution marche bien mais pas avec la comm
Plus de sujets relatifs à : [RESOLU] <li> d'un sous menu qui s'affiche horizontalement

Page générée en 0.028 secondes