Help ! Menu qui fait des caprices !

<div class="grid_8 header">
   	  		<div id="navigation">
				<ul id="nav">
					<li id="home"><a href="index.htm" title="Home page"class="currentPage">Home</a></li>
					<li id="about"><a href="about.htm" title="About">À propos</a></li>
                    <li id="services"><a href="services.htm" title="Services">Services</a></li>
					<li id="portfolio"><a href="portfolio.htm" title="Portfolio">Portfolio</a></li>
					<li id="contact"><a href="contact.php" title="Contact">Contact</a></li>

#navigation {
	height:80px;
	width:650px;
	margin:5px 0 0 0;
	padding:0 0 0 0;
	font-size: 17px;
	font-family: "Trebuchet MS";
}
#navigation a {color:#000;}
ul#nav {width: 550px;height:46px;padding:0 0 0 0;margin:0 0 0 15px;}
ul#nav li {
	line-height: 32px;
	width: 98px;
	margin-top: 20px;
	padding:30px 30px 0 0;
	margin:0;
	display:inline;
	float:left;
	text-align: center;/*text-indent:-9999px;*/
}
ul#nav li a {height:46px;border:0;display:block;text-decoration:none;overflow:hidden;padding:0;margin:0;}
li#home a, li#about a,li#services a, li#portfolio a, li#, li#contact a{height:46px;}
li#home a:hover, li#home a:focus, li#about a:hover, li#about a:focus, li#services a:hover, li#services a:focus,
li#portfolio a:hover, li#portfolio a:focus, li#contact a:hover, li#contact a:focus{
	color: #000;
	height:46px;
	width:98px;
	background-image:url('../images/bg/toolbar.gif');
	background-repeat:no-repeat;
	background-position:0px -46px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/*current page*/
.currentPage {background-image:url('../images/bg/toolbar.gif');background-repeat:no-repeat;background-position:0px 0px;}
a.currentPage{color:#fff!important;}