Menu despegable con solo css

[seravifer]

Hola, me problema es que tengo un menú normal que despliega subcategorías pero me gustaría saber como se podría hacer que cuando pasas por una categoría y se despliegan la subcategorías, entre ellas salga un icono como una flecha.

Pueden ver el código en http://www.seravifer.familiapixel.com esta pagina es una prueba.

[ZoroRoronoa]

Podrias mostrar un diseño "demo" del resultado que quieres.
No entiendo al 100, eso de una flechita entre ellas.

[seravifer]

[C2am]

Hola
Primero corrige el error que tienes en el menú: una lista tiene esta estructura <ul><li></li></ul> y no <li><ul></ul></li>

Código HTML:

<div id="menu">
 
          <div class="left">
 
            <li class="cat-item cat-item-1"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/" title="Ver todas las entradas archivadas en Sin categoría">Sin categoría</a>
<ul class='children'>
    <li class="cat-item cat-item-3"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/1/" title="Ver todas las entradas archivadas en 1">1</a>
</li>
    <li class="cat-item cat-item-4"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/2/" title="Ver todas las entradas archivadas en 2">2</a>
</li>
    <li class="cat-item cat-item-5"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/3/" title="Ver todas las entradas archivadas en 3">3</a>
    <ul class='children'>
    <li class="cat-item cat-item-6"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/3/4/" title="Ver todas las entradas archivadas en 4">4</a>
</li>
    </ul>
</li>
</ul>
</li>
     </div>
 

[seravifer]

Dudo que pueda cambiar la estrucctura, esta con wordpress...

Diseño:

<div id="menu">
<div class="left">
<?php wp_list_categories('title_li=&orderby=id'); ?>
</div>

[C2am]

¿Pero entonces como piensas realizar el agregado de la flechita?

En cuanto al error solamente debes agregar <ul> antes de <li class="cat-item cat-item-1">
y cerrarlo al final de todo.

Para la flechita, una posibilidad es meter una imagen dentro de un <li> o un div con position:absolute. Es decir que es posible que tengas que cambiar el html.

Saludos

[seravifer]

http://codex.wordpress.org/Template_Tags/wp_list_categories

[seravifer]

Ok meto el ul delante y ahora la flechita como la pongo.

[danihxh]

Si quieres utilizar sólo CSS añade un padding-top: 10px al <ul> y lo siguiente en tu hoja de estilos:

Código:

.children::before
{
	border-bottom: 10px solid red;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: relative;
	left: 10px;
	top: 2px;
	height: 0;
	width: 0;
	z-index: 10;
	content: "";
	display: block;
}

Si prefieres hacer otra cosa para segurar la compatibilidad con otros navegadores prueba a añadir algo como <div class="flecha"></div> dentro del <ul> (con el mismo padding-top que antes) y le pones también el mismo estilo o si lo prefieres lo modificas un poco y pones una imagen de una flecha de fondo.