Menú desplegable con HTML

Esta botonera está resuelta de forma similar a como funcionan las botoneras en wordpress. Una botonera (o navbar) es una lista de enlaces.

Para que los ‘li’ de la botonera se coloquen horizontalmente (queremos una botonera horizontal), indicaremos que los li dentro del menú tengan el estilo display:inline-block.

Nosotros identificaremos al li que tiene submenús asignándole un class. Dentro de ese li, además de haber un enlace, debería haber otro ul o submenú.

Para que ese submenú no desplace al resto de los elementos de la botonera, le pondremos position:absolute. Además, como el submenú debe mostrarse en vertical, le asignaremos a los li que tiene dentro el estilo display:block

Otra complicación a la hora de hacer la botonera es la animación que hace que los submenús se desplieguen. Esto se puede hacer ocultando los submenús con display:none inicialmente, y luego, cuando pase el cursor por encima de los li, asignarles el estilo display:block. Sin embargo, haciendolo de esta forma, nuestros submenús no tendrán animación. Para que si la tengan, les asigno una max-height de 0, y luego cuando pase el curso por encima lo aumento.

.menu{
	width: 300px;
	padding-left: 0;
	list-style:none;
}
	
.menu li a{
	color:black;
	background:pink;
	border:solid black 6px;
	border-radius: 10px;
	padding:15px;
	display:block
	...
}

.menu li a:hover{
	...
}

.menu li.hasChildren a:after{
	color:purple;
	content:" o";
}

Uso de iconos. Si cargo una fuente en la que todo son iconos, y pongo la letra correspondiente al icono que me interesa, mostraré el icono.

@font-face{
	font-family: flechita;
	src:url(Arrows_tfb.ttf);
}

Volver la botonera horizontal:

.menu li{
	display: inline-block;
...

<li class="hasChildren"><a href="#" title="las fotos de mis viajes">fotos</a>
	<ul>
		<li><a href="#">submenu 1</a></li>
		<li><a href="#">submenu 2</a></li>
		<li><a href="#">submenu 3</a></li>
	</ul>
</li>

.menu .hasChildren ul{
	position:absolute;
}
.menu .hasChildren li{
	display:block;
}

El símbolo > significa inmediatamente dentro. Por tanto, en el siguiente código…

<ul class="menu">
   <li>
      <a href="#">fotos</a>
      <ul>
         <li><a href="#">submenu</a></li>
      </ul>
   <li>
<ul>

… si quisieramos dar diseño al primer enlace pero no al segundo, usaríamos:

.menu li > a{

Lo cual sólo afectaría al primer enlace.

En el menú que estamos haciendo, para que los submenus no tengan el icono, habrá que modificar el estilo de este enlace:

.menu li.hasChildren a:after

Para que quede así:

.menu li.hasChildren > a:after

.menu li.hasChildren ul{
	...
	opacity: 0;
	overflow: hidden;
	max-height: 0;
	transition: 1s
}

.menu li.hasChildren:hover ul{
	opacity: 1;
	max-height: 800px
}

Modificamos el selector que ya teníamos y que tenía este aspecto:

.menu li:hover > a{

Para que quede así:

.menu li:hover > a

Hacer que en lugar de ser una botonera horizontal, sea una botonera vertical.

ol.indice, ol.indice ol{
	counter-reset: item;
}

.indice li::before {
	content: counters(item, ".") " ";
	counter-increment: item;
}
.indice li{
	list-style: none
}