Ik krijg een foutje in mijn menu maar niet verholpen.
Hoe zorg ik ervoor dat bij de hover hij het hele vakje hovert?

Link: http://superslice.nl/marketplace/

Groeten Mathijs

• Aanmelden
• Inloggen
• Wachtwoord vergeten

Die links bedoel je?

nee die daarboven ;)

#menu ul li {
list-style: none;
padding: 0;
background: url(images/seperator.png) no-repeat right;
}
#menu ul li a {
color: #ffffff;
font: 12px Arial;
text-decoration: none;
margin-right: 10px;
padding: 0 0 0 10px;
line-height: 44px;
float: left;
}
#menu ul li a:hover {
background: #f1f1f1;
color: #4c4c4c;
}


Als eerst moet die margin-right:10px; weg want dat moet een padding worden.
Daarbij moeten alle drie de stylen display:block; krijgen, dit zorgt ervoor dat het ook werkt in IE.

Zo dus:

#menu ul li {
list-style: none;
padding: 0;
background: url(images/seperator.png) no-repeat right;
display:block;

}
#menu ul li a {
color: #ffffff;
font: 12px Arial;
text-decoration: none;
margin:0px;
padding: 0 10px 0 10px;
line-height: 44px;
float: left;
display:block;
}
#menu ul li a:hover {
background: #f1f1f1;
color: #4c4c4c;
display:block;
}

Deze werkt niet.

Origineel gepost door Mathijs Kingma

Deze werkt niet.

Foutje, de codes die ik had geplaatst stonden door elkaar.
Achter 'Zo dus' staat nu de goede code, dit werkt waarschijnlijk wel.

#menu ul li a {
margin-right: 2px;
padding: 0 10px;
}

volgens mij is dat um. Bovenstaande code heeft poster geloof ik zijn goede code en jou foute code omgewisseld.

Mocht je een slicing service beginnen, bekijk dan wel of je html valideert. Een tekst direct in een <ul> mag bijvoorbeeld niet.

Ook dit:

<div id="menu">
<ul>

Kan simpelweg vervangen worden door

<ul id="menu">

succes!

Bedankt voor de hulp!
Ik heb hem werkend gekregen met:

#menu ul li {
list-style: none;
background: url(images/seperator.png) no-repeat right;
float: left;
}
#menu ul li a {
color: #ffffff;
font: 12px Arial;
text-decoration: none;
margin: 0;
padding: 0 10px;
line-height: 43px;
float: left;
display: block;
}
#menu ul li a:hover {
background: #f1f1f1;
color: #4c4c4c;
}

En bestaat er ook een mogelijkheid als je bijv op Forum hovert, dat er dan in het submenu eronder andere items verschijnen?

Ja, zoek even op jQuery suckerfish

http://be.twixt.us/jquery/suckerFish.php

daar bijvoorbeeld. Je nest een <ul> in een <li> en bij de li:hover show je de <ul> die je genest hebt. Even goed googlen op suckerfish en jquery dus. Is nogal ingewikkeld voor een beginnend html-er. Bovendien geef ik voorkeur aan submenu na een klik. Zeker de krengen die horizontaal onder elkaar staan zijn gewoon niet te gebruiken zonder pixelprecieze muisbewegingen.

Ziet er idd ingewikkeld uit, dit laat ik dan wel maken door iemand.
Aanvullend bericht:
Ik heb nog een klein vraagje, op http://superslice.nl/marketplace wil ik 3 items naast elkaar, maar er komen maar 2 naast elkaar, terwijl er genoeg ruimte is.

Hier de code:
#content h3.rubriek {
float: left;
line-height: normal;
background: url(images/rubriek.png) no-repeat;
width: 225px;
height: 34px;
margin: 5px 0 0 0;
padding: 10px 0 0 10px;
color: #363636;
font: 11px Arial;
}