Problema con lista el chrome

[Obakemono]

¡Hola!

Estoy con un diseño en css muy sencillito, de hecho solo me falta este detalle para tenerlo como quería.

www.couturelounge.com/pruebas

Cuando lo abro con google chrome, los elementos del menú superior que está hecho con una lista, me aparecen en forma de escalera, y por mas vueltas que le doy no consigo solucionarlo.
Lo más curioso es que si pincho en el enlace de inicio, que carga exactamente la misma página, el menú entonces carga bien.

Esto solo me ocurre en chrome, y en el safari del ipad (safari de escritorio, y de iphone carga bien a la primera).

¿Alguna pista?

--- EDITO ---

Vale, acabo de ver el problema, es como están puestos los <a href> para cada elemento de la lista, lo había hecho así para que ocupase todo el elmento li

<a href>
<li>
</li>
</a>

y esto es lo que produce el problema, ¿alguna sugerencia para lograr lo mismo de otra forma?

Un saludo y gracias.

[KoswiDigital]

Hola.

Lo que debes hacer es utilizar display: block; en los anclas y flotarlo a la izquierda, de la siguiente manera:

Código CSS:

ul li a
{
  display: block;
  float: left;
}
 

Y así, podrás poner correctamente <li><a href="#">menu1</a></li>, que es lo correcto.

Un saludo.

[Obakemono]

Gracias.

Eso funciona, pero no es exactamente lo que buscaba, solo el texto es clickable para seguir el enlace, necesito que todo el elemento <li> sea clickable, sigo investigando.

¡Un saludo!

[KoswiDigital]

Te pongo un ejemplo completo para que veas el funcionamiento:

Código CSS:

ul
{
    position: relative;
    height: 30px;
    margin: 0 auto 8.5px;
    padding: 5px 0;
    font: 1em Arial, sans-serif;
    text-align: center;
}
    ul li
    {
        display: inline;
    }
        ul li a
        {
            display: block;
            float: left;
            margin-top: 5px;
            padding: 2px 2.75em;
            color: #eaeef1;
            background: #222;
        }
            ul li a:hover , ul li a.selected
            {
                color: #F376DC;
                background: #672B5D;
            }
 

Según el padding que le des al ancla, cubrirás más o menos espacio en el enlace.


Creo que así solucionas. Saludos :)

[Obakemono]

¡Mil gracias!

Ya está, había sido fallo mio, que me faltaba el display:block para las etiquetas a

Solucionado.

¡Un saludo!

[KoswiDigital]

No hay de que, me alegra haberte ayudado :) Saludos