Barra de login con css

[neodani]

Bufff no me aclaro, si lo pongo en una capa se me descoloca todo, y he intendado quitar los id's de dentro de los <li> pero no me los coje ahora...

Este es codigo

Código HTML:

<div id="nav_login"> <!-- Barra de login y busqueda -->
	<form name="formLogin" method="post" action="login.php">
		<ul class="loginBox">
			<li><a id="registroBtn" href="http://localhost/weblocal/registro.php" target="_top">Regístrate Gratis!</a></li>
			<li><input type="text" name="user" tabindex="1" onblur="if(this.value=='') this.value='Nombre de Usuario';" onfocus="if(this.value=='Nombre de Usuario') this.value='';" value="Nombre de Usuario"/></li>
			<li><input type="text" name="pass2" tabindex="2" style="display: inline;" value="Contraseña" onfocus="this.style.display = 'none'; document.formLogin.pass.style.display = 'inline'; document.formLogin.pass.focus();" /></li>
			<li><input type="password" name="pass" tabindex="2" style="display: none;" onblur="if(this.value == '') {this.style.display = 'none'; document.formLogin.pass2.style.display = 'inline';}" /></li>
			<li><a id="entrarBtn" href="http://localhost/weblocal/entrar.php">Entrar</a></li>
			<div id="recordarBtn">
				<a href="http://localhost/weblocal/recordar_pass.php" target="_top">Recordar Contraseña</a>
			</div>
			<li><a id="recuperarBtn" href="http://localhost/weblocal/recuperar_pass.php" target="_top">¿Olvidaste tu contraseña?</a></li>

			<li><input id="cajabusqueda" type="text" name="buscar" tabindex="4" onblur="if(this.value=='') this.value='Busca en ME';" onfocus="if(this.value=='Busca en ME') this.value='';" value="Busca en ME"/></li>
			<li><a id="buscarBtn" href="http://localhost/weblocal/entrar.php">Buscar</a></li>
		</ul>	
	</form>
</div> <!-- end #nav_login --> 

Codigo css

Código HTML:

div#nav_login {
		color: inherit;
		background-color: #CEEF9C;
		border: 1px solid #e5e5e5;
		border-width: 0 2px 2px 0;
		height:50px; /* TAMAÑO MENU */
		margin-top:0px; /* Posicion desde arriba */
		padding-left: 20px;
		margin-bottom: 10px;
		}


/* BUSCADOR */

#cajabusqueda input{
font-family:Arial, Helvetica, sans-serif;
color:#333333;
background:#FBFCFC url(../imagenes/formularios/input-bgr.png) no-repeat scroll left top;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:15px;
font-size:12px;
display:inline;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 100px;

}
#buscarBtn a{
color:#333333;
margin:15px 15px 5px 10px;
text-decoration:none;

}
#buscarBtn a:hover{
color:red;
text-decoration:none;
}
/* FORMULARIO DE LOGIN */


.loginBox input{
font-family:Arial, Helvetica, sans-serif;
color:#333333;
background:#FBFCFC url(../imagenes/formularios/input-bgr.png) no-repeat scroll left top;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:15px;
font-size:12px;
padding:5px 5px 5px 10px;
margin:10px 5px 5px 5px;
}
.loginBox * {
display:block;
float:left;
margin-left:0.5px;
}


#registroBtn a{
color:black;
margin:3px 30px 5px 5px;
width:50px;
text-align:center;
text-decoration:none;
}
#registroBtn a:hover{
color:#999999;
margin:3px 30px 5px 5px;
width:50px;
text-align:center;
text-decoration:none;
}


#entrarBtn {
color:red;
margin:15px 15px 5px 10px;
text-decoration:none;
}
#entrarBtn a {
color:red;
text-decoration:none;
}
#entrarBtn a:hover {
color:blue;
text-decoration:none;
}

/* margen superior 1em,
right margin 2em,
bottom margin 3em,
left margin 4em */

#recordarBtn {
color:black;
text-decoration:none;
font-size:10px;
padding:15px 15px 5px 10px;
float:left;
}

#recuperarBtn a {
color:black;
margin:15px 15px 5px 0px;
text-decoration:none;
font-size:10px;
}
#recuperarBtn a:hover {
/*background:transparent url(../imagenes/formularios/button.png) repeat-x scroll right top;*/
color:#999999;
text-decoration:none;
}

/* 		Fin Barra LOGIN 			*/

Qué cambiariais?

Muchas gracias

PD: Soy yo o el codigo CSS me parece muy largo para tan poco trozo de la web? xD