CSS Menu Horizontal: display: inline; ne fonctionne pas
Je suis sur Chrome/Firefox. J'ai lu plusieurs tutoriels et des questions sur ce sujet.
J'ai un UL contenant LI. J'ai mis le LIs à "display: inline;", mais ils ne seront pas. Ils sont toujours à la verticale.
Ce que je fais mal?
Thx.
Voici mon css:
.menu{
width: 100%;
padding: 0px;
margin: 0px;
outline: 1px solid grey;
background-color: #f6f6f6;
font-size:100%;
}
.menu ul{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
background-color: #f6f6f6;
}
.menu li ul{
display: none;
height: auto;
padding: 0px;
margin: 0;
background-color: #f6f6f6;
outline: 1px solid gray;
position: absolute;
z-index: 200;
left: 20px;
top: 30%;
}
.menu li:hover ul{
display: block;
}
.menu li:hover{
background-color: #005ea2;
}
.menu li{
display: inline;
padding: 0;
margin: 0;
border-bottom: 1px dotted grey;
}
.menu ul li:last-child{
border: none;
}
.menu a{
display: block;
color: #333333;
text-decoration: none;
margin: 0px;
margin-left: 5px;
}
.menu a:hover{
color: white;
background-color: #005ea2;
}
.menu .menu_header{
color: #333333;
}
.menu .menu_header a:hover{
color: white;
}
- Est-il une raison particulière pour que vous définissez .menu ul pour float:left? Essayez de l'enlever. Et aussi nous donner le code html.
- Essayez
display:inline-block;
au lieu dedisplay:inline;
(float:left;
également de travailler, mais a d'autres effets secondaires) - inline-block n'est pas bien pris en charge x-navigateur.
- c'est beaucoup mieux pris en charge que beaucoup de gens pensent. IE6 n'ont de gros problèmes avec elle, mais qui a des codes pour IE6 ces jours-ci? IE7 a des bugs, mais ils sont faciles à contourner. Tous les autres navigateurs et les versions sont très bien.
InformationsquelleAutor MrBubbles | 2010-12-17
Vous devez vous connecter pour publier un commentaire.
La
<li>
éléments doivent avoirfloat:left
tout d'abord, vous pouvez envisager l'ajout de la pertinente HTML de votre réponse, pour aider answerers comprendre votre situation.
Je peux repérer plusieurs choses étranges qui pourraient être liés à votre problème.
Tout d'abord, le
li ul
sélecteur ne sont pas très utiles: il est plus probable que vous avez voulu dire le contraire,ul li
.Deuxième, je vois que sur le vol stationnaire, vous avez quelque chose qui change de
display: block
. C'est un trèsétrange comportement à avoir sur le vol stationnaire, êtes-vous sûr?
Troisième, je vois que vous avez
a { display: block }
. Cela ne veut pas jouer gentiment si son contenant estdisplay: inline
de sorte que vous pouvez passer àdisplay: inline-block
pour le conteneur (qui est ce que je dirais pour un menu horizontal de toute façon)