Meniu expandabil cu CSS

Daca as spune ca tranziţiile folosesc pentru orice, este o exagerare, dar ... foloseste pentru aproape orice. De data aceasta, sa vedem modul în care acestea ar putea fi aplicate pentru a crea meniuri expandabile.

Cred că HTML este un dreptunghi în care adaugam o lista ordonata a cărei clasa este vizibil şi în interiorul adaugam a doua lista, cu o clasa invizibila:

Cod HTML

<div id="demomenu">
<ul class="visiblela">
<li>Acasa <ul class="novisible">
<li><a href="#">Tema 1</a></li>
<li><a href="#">Tema 2</a></li>
<li><a href="#">Tema 3</a></li>
<li><a href="#">Tema 4</a></li>
<li><a href="#">Tema 5</a></li>
</ul>
</ul>
</div>

si CSS

<style>

/* reguli generale */
#demomenu { /* ACESTA ESTE DREPTUNGHIUL CARE CONTINE TOT */
margin: 0 auto 50px;
position: relative; /* ozitionare de forma relativa */
width: 200px; /* definim latimea */
z-index: 100;
}
#demomenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#demomenu li { list-style-type: none; }
#demomenu a { /* se stabileste propietatea text de legatura linck */
color: #456;
font-size: 17px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFF;
}
#demomenu a:hover { color: #000; }

/* aceasta este linia vizibila */
#demomenu .visible {
background-color: #456;
border: 2px solid #ABC;
border-radius: 4px;
box-shadow: 0 0 5px #FFF inset;
cursor: pointer;
padding: 5px 0;
text-align: center;
display: block;
position: absolute;
width: 200px;
}
#demomenu ul.visible li {
color: #EEEEEE;
font-family: Tahoma;
font-size: 24px;
text-shadow: 1px 1px 1px #000;
}

/* fiecare linie ce ramane invizibila */
#demomenu ul.visible ul li {
background-color: #ABC;
border-top: 2px solid #456;
padding: 0 0 5px;
/* aceasta tranzatie afecteaza culoarea de fond de la fiecare tema */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

/* lista ascunsa */
#demomenu .novisible {
display: block;
padding: 0 10px;
position: relative;
top: 10px;
height: 0;
overflow: hidden;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

/* schimba culoarea de fond */
#demomenu ul.visible ul li:hover { background-color: #CDE; }

#demomenu ul.visible:hover .novisible { height: 200px; }

</style>

Un exemplu de meniu click aici

---