Menu problem

I’ve designed a menu in photoshop and now I’m trying to get it in css. I’ve been semi successful up untill now. Here is my css:

@charset "utf-8";
/* CSS Document */

#navigationcontainer{
	list-style: none;
	padding: 0;
	margin: 0;
	overflow:hidden; 
	height:1%;
}

#navigation{
	width: 550px;
	padding-top: 7px;
	float: left;
	height: 69px;
 
}

#navigation a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}


#navigation .wie {
	width: 84px;
	height: 69px;
	background: url(../images/navigatie/wielink.png) no-repeat;
	
}

#navigation .locatie {
	width: 150px;
	height: 69px;
	margin-left: 84px;
	background: url(../images/navigatie/locaties.png) no-repeat;
	
}

#navigation .menu{
	width: 64px;
	height: 69px;
	margin-left: 234px;
	background: url(../images/navigatie/menus.png) no-repeat;
	}

#navigation .event{
	width: 70px;
	height: 69px;
	margin-left: 298px;
	background: url(../images/navigatie/events.png) no-repeat;
	}
	
#navigation .contact{
	width: 153px;
	height: 69px;
	margin-left: 368px;
	background: url(../images/navigatie/contact.png) no-repeat;
	}

HTML

<div id="navigationcontainer">
			<div id="navigation">
				<ul>
					<li><a href="#" class="wie">Wie</a></li>
					<li><a href="#" class="locatie">Locaties</a></li>
					<li><a href="#" class="menu">Menus</a></li>
					<li><a href="#" class="event">Events</a></li>
					<li><a href="#" class="contact">Contact</a></li>
				</ul>
					
			</div>
		

The problem I have now is the hover and active states. How can I apply them now? I’m not sure if I can still achieve this now. Website can be seen here:
http://rockarena.be/html/events.html

Dumb dumb, like this off course:

#navigation a.wie {
	width: 84px;
	height: 69px;
	background: url(../images/navigatie/wielink.png) no-repeat;
	

and then

#navigation a.wie:hover {
	width: 84px;
	height: 69px;
	background: url(../images/navigatie/wielink.png) no-repeat;
	

:wink:

Ah okay. I just had another look at your css but you use a bit of an unusual structure. This is how I would do it


#navigationcontainer{
	list-style: none; padding: 0; margin: 0; overflow:hidden; height:1&#37;;
}

#navigation{
	width: 550px; padding-top: 7px; float: left;
 
}

#navigation li {
	float:	left; position: relative;
}

#navigation a {
	display: block; outline: none; height: 69px;
}


#navigation .wie {
	width: 84px; background: url(../images/navigatie/wielink.png) no-repeat;
	
}

#navigation .locatie {
	width: 150px; background: url(../images/navigatie/locaties.png) no-repeat;
	
}

#navigation .menu{
	width: 64px; background: url(../images/navigatie/menus.png) no-repeat;
	}

#navigation .event{
	width: 70px; background: url(../images/navigatie/events.png) no-repeat;
	}
	
#navigation .contact{
	width: 153px; background: url(../images/navigatie/contact.png) no-repeat;
	}


As you can see I added a style for the li’s, I made them float left. That way you can remove all those margins from your menu classes. I added the 69pxls to #navigation a. since all menu items have the same height, so I could removed the height from the separate classes as well

None, I forgot to alter the image path! I was concerned with the css logic :wink:

Maybe a stupid question but you use the same image for the normal and hover state.


#navigation a.wie {
	width: 84px;
	height: 69px;
	background: url(../images/navigatie/wielink.png) no-repeat;
}

#navigation a.wie:hover {
	width: 84px;
	height: 69px;
	background: url(../images/navigatie/wielink.png) no-repeat;
}

What is the logic behind this?