مشکل hover در منو

درود برشما
این کد طراحی یه منو هست.ولی نمی دونم چرا HOVERمشکل داره؟

<style type="text/css">
    
			#nav
			{ 
				width:900px;
				height:60px;
				margin:0 auto;
				background-color:#EBEBEB; 
				margin-top:10px;
				 
			} 
			
			#nav ul
			{
				margin:0; 
				padding:0; 
				list-style-type:none; 
			}
			#nav ul li
			{
				float:left; 
			} 
			
			#nav ul li a
			{
				text-decoration:none; 
				color:#999; 
				padding-left:30px;
				display:block; 
				padding-top:16px; 
				height:44px;  
				float:left; 
			}  
			
			#nav ul li a:hover
			{ 
				background-color:#900; 
				border-top:3px solid #000; 
				color:#FFF;
				height:41px; 
				text-align:center;
				 
			} 
			
			#nav-one
			{
				
				background-color:#900; 
				color:#FFF;
				border-top:3px solid #000;
				display:block;
				height:41px; 
				
			}
  
    		<div id="nav">
            
            	<ul>
                	<li><a href="#" title="HOME" id="nav-one">HOME</a></li> 
                    <li><a href="#" title="STYLEDEMEO">STYLEDEMEO</a></li>
                    <li><a href="#" title="FULLWIDTH">FULLWIDTH</a></li>
                    <li><a href="#" title="DROPDOWN">DROPDOWN</a></li>
                    <li><a href="#" title="GALLERY">GALLERY</a></li>
                    <li><a href="#" title="PORTFOLIO">PORTFOLIO</a></li>
                </ul>
            </div>  
    
    </style>