CSS-Horizontal-Menü: Anzeige: Inline; wird nicht funktionieren

Question

Ich bin auf Chrome/Firefox. Ich habe auch einige Tutorials und Fragen zu diesem Thema gelesen.

Ich habe eine UL mit LI. Ich setze die LIs auf "display: inline;", aber sie werden nicht. Sie sind immer noch vertikal.

Was mache ich falsch?

Thx.

Hier ist meine 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; 
} 

Answer 1

Die <li> Elemente float:left

Answer 2

allererst Sie sich anschauen sollten das Hinzufügen der entsprechenden HTML zu Ihrer Antwort haben müssen, Beantworter besser zu verstehen, um Ihre Situation zu helfen.

Ich kann einige seltsame Dinge entdecken, die mit Ihrem Problem zusammenhängen könnten.

Erstens sind die li ul Selektor nicht sehr nützlich: es ist eher wahrscheinlich, dass Sie das Gegenteil meinten, ul li.

Zweitens, ich sehe, dass bei Hover Sie etwas auf display: block ändern. Dies ist ein sehr seltsames Verhalten auf Hover haben, bist du sicher?

Drittens sehe ich, dass Sie a { display: block } haben. Dies funktioniert nicht gut, wenn sein Container display: inline ist, so dass Sie möglicherweise für den Container auf display: inline-block wechseln möchten (was ich für ein horizontales Menü sowieso vorschlagen würde)