Discussion :

[inouekun]

bonjours,

Je suis en train d'ajouter un menu horizontale avec liste déroulante lorsqu'on passe la souri dessus.

Sauf que, quand je rajouter float:left; dans mon css de menu > li
Mon menu ne se met pas à l'horizontale.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
#menu {
    width:520px;            /*-----donner une largeur au menu, prendre en compte les marges-------*/
    height: auto;           /*-----important pour IE7, mettre une hauteur auto sinon pas de menu deroulant------*/
    list-style-type: none;  /*-----pas de puce-----*/
    margin: 0 auto;         /*-----marge auto pour centrer mon menu dans l'élément-------*/
    padding: 0;             /*-----marge interne à 0 et bordure à 0 pour ne pas avoir de soucis avec les différents navigateurs-----*/
    border: 0;
 
}
#menu > li            /*------uniquement pour la liste de premier niveau-------*/
{
    float: left;        /*------permet de mettre les items <li> horizontalement------*/
    width: 120px;          /*------je donne une largeur à mes cellules-------*/
    margin: 5px;           /*------j'espace mes cellules de 5px-------*/
    border: 0;
    /*display: inline; */
    padding : 0 0.5em;
 
}
#menu li a                   /*------pour les liens de premier niveau-------*/
{
    display: block;        /*------pour mettre mes liens en block------*/
    color: #FFFFFF;         /*------donne une couleur à la police------*/
    background-color: rgb(0, 0, 0);   /*------je donne un fond solide par sécurité pour les navigateurs qui ne reconnaissent pas la transparence-----*/
    background-color: rgba(0, 0, 0, 0.5);     /*------fond transparent reconnus par les bons éléves-----*/
    margin: 0;                                /*------mettre tout le monde d'accord--------*/
    padding: 4px 8px;                         /*-----marge interne----*/
    border:1px solid #FFFFFF;                 /*-----une bordure extérieur-------*/
    text-decoration: none;               /*-----pas de décoration pour mes liens-----*/
 
}
 
#menu li a:hover {     /*-------une couleur de fond au survol sur mes liens-------*/
    background-color: rgb(175, 214, 1);
    background-color: rgba(175, 214, 1, 0.5);
} 
/* ---------------------SOUS MENU-----------*/
 
#menu .menuderoulant       /*----pour mon menu déroulant-------*/
{
    display: none;          /*------pour le faire disparaitre------*/
    list-style-type: none;  /*-------pas de puce-------*/
    margin: 0;              /*------pas de marge interne et externe ni bordure pour mettre tout le monde d'accord--------*/
    padding: 0;
    border: 0;
 
    position:absolute;
    z-index:900;
}
#menu .menuderoulant li         /*-------pour ma liste de deuxième niveau-------*/
{
    margin: 0;
    padding: 0;
    border: 0;
    width: 140px;                /*----------je donne une largeur à mes cellules de sous menu----------*/
    border-top: 1px solid transparent;       /*-----des bordures transparentes pour espacer mes cellules-----*/
    border-right: 1px solid transparent;
}
#menu .menuderoulant li a         /*---------pour mes liens du menu deroulant---------*/
{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
    background-color:rgb(0, 0, 0);
    background-color:rgba(0,0,0,0.5);
 
}
#menu .menuderoulant li a:hover       /*------pour le survol du sous menu-------*/
{
    background-color: rgb(18, 89, 239);
    background-color: rgba(18, 89, 239, 0.8);
 
}
 
#menu .menuderoulant li a:visited {         /*---------pour permmetre au visiteur de savoir sur les liens qu'il a déjà visité--------*/
    background-color:rgb(227, 22, 30);
    background-color:rgba(227, 22, 30, 0.5);
}
 
#menu li:hover > .menuderoulant { display: block; }    /*------pour faire apparaitre notre sous menu au survol du menu de premier niveau------*/

float : left ne fonctionne pas, ainsi que display: inline-block ou inline
Alors, si vous avez une idée, merci.

Le resultat :