Wenas! Tengo un problema con el menú de esta web
http://tmcreative.es/clientes/secretosdegranada/
Al pasar el ratón por algún elemento que contenga subelementos (por ejemplo PRODUCTOS), debe verse este rombo 
al pasar el ratón por encima de cada elemento de la lista. Tras trastear con el css lo he conseguido, pero el rombo se me ve fuera del bloque marrón, y debe verse dentro, cómo lo soluciono??
Se me ocurre metiendo span vacios ocultos dentro del li pero no se si es el método más correto o poniendo el punto de background del li ajustando el tamaño de la imagen.
<html>
<head>
<title>Puntito</title>
<style type="text/css">
body { background-color: #503228; }
ul li ul { display: none; }
ul li:hover ul {
display: block;
list-style: none;
background-color: #AF9F99;
width: 200px;
}
ul li ul li span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
}
ul li ul li:hover span {
background-image: url(http://tmcreative.es/clientes/secretosdegranada/__images/rombo-lista.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">Utilidades</a>
<ul>
<li><span></span><a href="#">Aflojatuercas instantáneo</a></li>
<li><span></span><a href="#">Asustaviejas 2000</a></li>
</ul>
</li>
<li>
<a href="#">Repuestos</a>
<ul>
<li><span></span><a href="#">Repuesto de cerebro</a></li>
<li><span></span><a href="#">Repuesto de cerebro versión Genio</a></li>
</ul>
</li>
</ul>
</body>
</html>
está quedando muy chula la página
el superfish es un coñazo de mil pares de cojones xD De todas formas, tal y como lo tienes maquetado es imposible que salga dentro de la lista. Como ya sabrás, la clave es esto:
.sf-menu ul li:hover {
list-style: url(../__images/rombo-lista.png);
}Y así se te va a quedar el rombo fuera siempre, porque son los elementos de la lista los que tienen el color de fondo, y la list-style-image va siempre fuera del elemento de la lista. No sé si me explico bien, pero en verdad da lo mismo.
Lo que yo haría es algo así (Usando los selectores del sf, que es como tú lo tienes, aunque a mí me parecen liosos de cojones):
.sf-menu li li a {
padding-left: 10px;
background: transparent url('rombo_sprite.png') no-repeat top left;
}
.sf-menu li li a:hover {
background-position: 0 -7px:
}
Donde rombo_sprite.png es una imagen de 14px de alto y 8 de ancho con la mitad superior transparente y la inferior con el rombo. Creo que sabes montar un sprite, si no me lo dices.
Lo he hecho sin probar nada, pero aún así, quitando el estilo que puse primero (.sf-menu ul li:hover) y a lo mejor algún retoque más, debe valerte.
#3 mañana a primera hora pruebo, tiene buena pinta, creo que debería funcionar ^^ Gracias por tu tiempo =)
#3 efectivamente tu idea funcionó. Tan solo tuve que realizar algún pequeño cambio para que la imagen quedase bien cuadrada
.sf-menu li li a {
background: #503228;
font-family: Museo300;
font-size: 11px;
height: 7px;
background: transparent url('../__images/sprite-rombo.png') no-repeat;
background-position: -8px;
}
.sf-menu li li a:hover {
background: #503228;
font-family: Museo300;
font-size: 11px;
height:7px;
background: transparent url('../__images/sprite-rombo.png') no-repeat left;
background-position: 0px 3px;
}
Podeis ver el resultado final en el enlace de #1, gracias de nuevo ^^
#1 probaste a usar "inside" en los estilos del superfish?
Que el superfish usa en los list-style "outside" por lo que el símbolo de la lista (de los li) estará fuera del li. Con inside estarían dentro del li.
Pruebalo que yo una vez tuve problemas con eso y lo solucioné cambiando eso en la hoja de estilos del superfish.
