Problems with css menu, using "li class"

[noahnordqvist]

I recently started working on my first actual website and wanted to try out "li class"-command with unique menu-bars, unfortunately, I couldn't make it align properly, and I was wondering if someone could help me?

Here's the css code for the menu and the #nav (these are written inside the same DW-document, named style.css):

#menu {
	width:944px;
	height:100px;
	margin-bottom:10px;
	float:left;
	}

ul#nav li.hem {
	list-style:none;
}

ul#nav li.kontakt {
	list-style:none;
     }
	 
ul#nav li.ommig {
	list-style:none;
	}

	
ul#nav li.hem a:link, a:visited {
	height:80px;
	width:315px;
	padding:10px;
	background:url(menubar1.jpg);
	float:left;
	}

ul#nav li.kontakt a:link, a:visited {
	height:80px;
	width:308px;
	padding:10px;
	background:url(menubar3.jpg);
	float:left;
	}


ul#nav li.ommig a:link, a:visited {
	height:80px;
	width:320px;
	padding:10px;
	background:url(menubar2.jpg);
	float:left;
	}
	
ul#nav li.hem a:hover {
	background:url(menubar1hovered.jpg);
	}
	
ul#nav li.kontakt a:hover {
	background:url(menubar3hovered.jpg);
	}
	
ul#nav li.ommig a:hover {
	background:url(menubar2hovered.jpg);
	}
	
ul#nav li.hem a:active {
	background:url(menubar1presseddown2.jpg);
	}
	
ul#nav li.kontakt a:active {
	background:url(menubar3presseddown2.jpg);
	}
	
ul#nav li.ommig a:active {
	background:url(menubar2presseddown2.jpg);
	}

Also, here's the html-code for the menu:

<div id="menu">

<ul id="nav">
<li class="hem"><a href="#"></a></li>
<li class="kontakt"><a href="#"></a></li>
<li class="ommig"><a href="#"></a></li>
</ul>

</div>

[Nile]

Did you want the text to be centered vertically and horizontally?

Please post a link to the page on your site that contains the problematic script so we can check it out.

[noahnordqvist]

I want it to be horizontal!

Here's the site: http://www.noah.cssninja.se

[Nile]

The reason that the lists are not lined up is because the area in the div isn't great enough to allow the width of three or more lists.

#menu {
	width:944px;
	height:100px;
	margin-bottom:10px;
	float:left;
	}

You could make each image and li smaller or you can make the menu div's width bigger.