probleem in css (hover)

**Niels Parmentier** · 18-12-2009, 17:58

Halo,

Ik heb een probleempje in css.
Ik wil op m'n navigatieknoppen een hover effect.
Maar de hover is te groot.
Weet iemand hoe ik dit probleem kan oplossen.

html code :

Code:

[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>freddy coussens 2</title
><link href="layout.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">

  <div id="header"></div>
   <div id="left_content">
     <div id="navigatie">
       <ul>
	      <li><a href="#">Home</a></li>
		  <li><a href="#">diensten</a>
			  <ul>
			    <li><a href="#">failissementen</a></li>
				<li><a href="#">inboedel</a></li>
				<li><a href="#">import-export</a></li>
			  </ul>
		    </li>
			<li><a href="#">aanbod</a> 
			  <ul>
			     <li><a href="#">machines</a></li>
				 <li><a href="#">antiek</a></li>
				 <li><a href="#">inboede</a></li>
			   </ul>
			 </li>
			 <li><a href="#">Contact</a></li>
        </ul>
     </div>
  </div>
  <div id="right_content"></div>
  <div id="footer"></div>
  </div>


</body>
</html>

css code :

Code:

body {
margin:0px;
padding: 0px;
background-color: #375d81;
background-repeat:no-repeat
}

#wrapper {
	text-align : left;
	width : 1218px;
	background-color: #375d81;
	height: 750px;
}
#header {
background-image: url(header.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
height: 188px;
width: 800px;
margin-right: 244px;
margin-left: 244px;
}
#left_content {
background-color: #375d81;
background-attachment:fixed;
background-repeat:no-repeat;
vertical-align:top;
width:350px;
height:297px;
margin-left: 355px;
margin-top: 15px;
}
#navigatie a {
background-color:: #375d81;
color : #e1e6fa;
text-align:left;
display:block;
padding:7px 5px 7px 5px;
white-space: normal;
text-decoration: none;
}
#navigatie a:hover {
background-image:url(navbuttons.gif);
}
#navigatie ul {
margin: 3px;
text-align:center;
background-image:url(nav.gif);
background-repeat:no-repeat;
list-style: none;
margin: 1px;
position:absolute;
width: 10em;
height: 9em;
left: 351px;
top: 219px;
}
#navigatie ul li {
text-align:
}
#navigatie ul li ul {
text-align:center;
left: 8.8em;
position:absolute;
top: 10px;
visibility:hidden;
width: 10em;
height: 7em;
}
#navigatie ul li:hover ul {
text-align:center;
visibility:visible;
}
#right_content {
}
#footer {
}

alvast bedankt

**D.Postma** · 18-12-2009, 18:04

Nvm, verkeerd gekeken zal nu ff opnieuw zoeken.

EDIT

Code:

#navigatie ul li {
text-align:
}

Probeer in te vullen + " ; " toe te voegen, kan probleem veroorzaken.

En verander ook wat onder mij in de post staat.

**Arjen K** · 18-12-2009, 18:05

Code:

#navigatie a {
background-color:: #375d81;

Twee maal een dubbele punt zorgt voor problemen denk ik.

**Jeroen Kamphuis** · 18-12-2009, 20:09

je moet de margin van de ul in de ul li weer op 0 zetten en padding etc. Een list heeft standaard margins ofzo.

**Niels Parmentier** · 19-12-2009, 10:12

Ik heb alles aangepast en het is me gelukt.
Bedankt allemaal!

**D.Postma** · 19-12-2009, 11:05

Goed om te horen ;').

Geen probleem.

probleem in css (hover)