No toma el float

[el_cesar]

Amigos foreros, estoy tratando de crear un menu con css siguiendo un tuto que encontre en la red.

tengo esto en mi web

Código HTML:

<div class="contenedor">
 
    <div class="header">
 
        <div class="logo"></div>
 
        <div class="buscador"></div>
        <div class="menu">
            <ul id="navi">
              <li><a href="#">inicio</a></li>
              <li><a href="#">acerca de</a></li>
              <li><a href="#">contactos</a></li>
            </ul>
        </div>
 
    </div>
 
 
 
</div>
 
 
 
</body>
 

y mi hoja de estilos es

Código CSS:

body {
 
    background-color: #CCCCCC;
 
    margin-top: 0;
 
}
 
.contenedor {
 
margin:0 auto 0 auto; 
 
margin-top: 0;
 
top: 0px;
 
width:800px;
 
background-color:#FFFFFF;
 
}
 
.header {
 
position: relative;
 
width: 800px;
 
height: 75px;
 
 
 
}
 
 
 
.logo { 
 
position: relative;
 
width: 222px;
 
height: 75px;
 
background-image:url(../images/logo.jpg);
 
}
 
 
 
.buscador { 
 
position: absolute;
 
width: 222px;
 
height: 75px;
 
margin-top: -75px;
 
left: 578px;
 
background-color: #000000;
 
}
.menu {
position: relative;
width: 800px;
height:15px;
background-color:#000000;
}
 
#navi {  
    list-style:none;
    margin:0;
    padding:0;
    }
//luego a los elementos de la lista...
#navi li {
    margin:2px;
    padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
    float:left;
    }
 
#navi li a {
    display:block; //Convertimos el vínculo en un bloque.
    width:100px;
    padding:4px 0;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
    color:#99CC00;
    background-color:#003366;
}
 

Pero resulta que el menu al que le aplico #navi no toma el float ni los efectos, es mas se ve asi www.crmbusiness.biz/practica/propuesta


gracias

[Dalvenjha]

Revisandolo con el firebug, tu li no tiene ningún estilo, de hecho es como si no estuviera escrito, fíjate pq es eso.

[DragonX]

Vos tenes esto:

Código CSS:

#navi li a{
background-color:#000000;
color:#FFFFFF;
display:block;
font-size:11px;
padding:4px 0;
text-align:center;
text-decoration:none;
}
 

agregale el float:left; y listo
Slds.-

[el_cesar]

Iniciado por DragonX

Vos tenes esto:

Código CSS:

#navi li a{
background-color:#000000;
color:#FFFFFF;
display:block;
font-size:11px;
padding:4px 0;
text-align:center;
text-decoration:none;
}
 

agregale el float:left; y listo
Slds.-

Listo ya le puse el float y lo acomoda horizontalmente, pero no me sale el efecto ni los espacios, asi es como se ve ahora www.crmbusiness.biz/practica/propuesta

[el_cesar]

ya logre el espaciado modificando el padding en #navi li a {

pero ahora no me sale el cambio de color cuando el mouse esta sobre el enlace