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 :

[rodolphebrd]

Bonjour,

pouvez-vous envoyer votre code HTML.

[miss_socrates]

Et en essayant de placer float:left sur ul puisque c'est la liste qui doit être alignée et en ajoutant display: inline ?

[inouekun]

bonjour,
J'ai un peu tout touché dans le code et j'ai réussi.
J'ai pas trop compris comment ^^
Et le float était dans le ul avant, mais ça ne m’arrangeait pas. alors j'ai mis dans un div ^^

[rodolphebrd]

Bonjour,

pouvez-vous envoyer votre code HTML.

[miss_socrates]

bonjour,
J'ai un peu tout touché dans le code et j'ai réussi.
J'ai pas trop compris comment ^^
Et le float était dans le ul avant, mais ça ne m’arrangeait pas. alors j'ai mis dans un div ^^

Je ne vois pas trop l'intérêt de mettre un ul seul dans une div (sauf si on souffre d'une divite aiguë)
Enfin, si c'est réussi, n'oubliez pas de mettre le sujet en RESOLU...

[rodolphebrd]

Je dois être invisible, peut-être qu'on ne me voit plus