MENU VERTICAL EN BLOGGER |
CODIGO:
<ul class="acorh">
<li><a href="DIRECCION DE LA WER">LENGUAJE</a>
<ul>
<li><a href="URL11">LENGUAJE</a></li>
<li><a href="URL12">RAZ. VERBAL</a></li>
<li><a href="URL12">LITERATURA </a></li>
<li><a href="URL12">MATERIALES</a></li>
</ul>
</li>
<li><a href="#">CIENCIAS SOCIALES</a>
<ul>
<li><a href="URL21">FILOSOFÍA</a></li>
<li><a href="URL22">CÍVICA</a></li>
<li><a href="URL23">ECONOMIA</a></li>
<li><a href="URL23">PERSONA Y FAMILIA</a></li>
<li><a href="URL23">HISTORIA</a></li>
<li><a href="URL23">GEOGRAFÍA</a></li>
</ul>
</li>
<li><a href="#">TUTORIA</a>
<ul>
<li><a href="URL31">COMUNICADOS</a></li>
<li><a href="URL32">NOTAS</a></li>
<li><a href="URL32">ETAS</a></li>
</ul>
</li>
</ul>
<li><a href="#">TICS</a>
<ul>
<li><a href="URL31">YOUTUBE</a></li>
<li><a href="URL32">DESCARGAS</a></li>
<li><a href="URL32">SOFWAREs</a></li>
</ul>
</li>
antes de la ultima </ul> (que esta al final del codigo) y si queremos otro submenu agregamos:
<li><a href="URL32">Opción 3.2</a></li>
debajo del mismo codigo
Y en esa espacio en blanco pegamos el codigo CSS:
ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}
