Css Inline menu werkt niet, hoe op te lossen?

Ik heb een menu gemaakt in css, deze vind ik best netjes, maar de tekst wordt als 1 blok weergegeven. Nu is het mijn bedoeling om er een hover aan toe te voegen, maar wanneer ik dat nu doe wordt alle tekst dus, bijvoorbeeld, rood. Wat ik wil is dat, home: groen, contact: blauw wordt, bij de hover - dit enkel als voorbeeld, deze kleuren wil ik niet gebruiken.

Wat klopt er niet aan deze code? Wat kan ik beter anders neerzetten? En wat moet erbij, zodat het wordt zoals ik wil?

Het valt te vergelijken met het menu van: http://webtraders.nl/ (2de afbeelding hier)

Bovenste afbeelding is mijn hover, dus alles rood. De onderste is zoals ik het hebben wil.

#navBar{
display: block;
position: relative;
z-index: 10px;
height: 45px;
color: white;
background: #00c9fc;
-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
unselectable: on;
background: #0078c9;


}

#navBar ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
list-style-type:none;
margin:0;
padding:0;
float: right;
margin-right: 250px;
margin-top: 10px;
word-spacing:15px;
}

#navBar li{
display:inline;
}

#navBar ul:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
list-style-type:none;
margin:0;
padding:0;
float: right;
margin-right: 250px;
margin-top: 10px;
word-spacing:15px;
color: red;
}

Weet jij het antwoord?

/2500

Het beste antwoord

Dit moet werken: #navBar{ display: block; position: relative; z-index: 10px; height: 45px; color: white; background: #00c9fc; -moz-user-select: none; -khtml-user-select: none; -o-user-select:none; unselectable: on; background: #0078c9; } #navBar ul{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; list-style-type:none; margin:0; padding:0; float: right; margin-right: 250px; margin-top: 10px; word-spacing:15px; } #navBar li{ display:inline; } #navBar ul li a:hover{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; list-style-type:none; margin:0; padding:0; float: right; margin-right: 250px; margin-top: 10px; word-spacing:15px; color: red; } Toegevoegd na 18 uur: Voor degene die willen weten wat het probleem was, Yss had in zijn CSS * { clear: both; } staan, het * betekent het CSS style wat altijd actief is. * is eigenlijk het hele document. Dmv clear: both; hef je de floats op, waardoor zijn float: left op de li niet werkte. Het is nu opgelost!

Stel zelf een vraag

Ben je op zoek naar het antwoord die ene vraag die je misschien al tijden achtervolgt?

/100