menu in css - dropdown menu - css

Question

I have a little problem with my menu. I intend to do a pulldown menu. As I have the code now, the < li > is displayed , but the idea is by click or by hover "Cambio de centro " unfold the < li > that is inside ... Any idea ?
This is my code:
<div class="verticalaccordionIndex">
<img src="Images/botones/ficheros-btn.png" class="verticalaccordion">
<ul>
<li>
<h3>FICHEROS</h3>
<div class="subverticalaccordionIndex">
<ul>
<li>
<h3><a href="SelectCentro.aspx">Cambio de centro <span>+</span></h3>
<ul class="content-menu">
<li class="content-li">Festivos</li>
<li class="content-li">Áreas de trabajo</li>
<li class="content-li">Centros</li>
<li class="content-li">Actividades</li>
<li class="content-li">Espacio de trabajo</li>
<li class="content-li">Cierre de espacios</li>
<li class="content-li">Trabajadores</li>
<li class="content-li">Convenio</li>
</ul>
</li>
<li>
<h3> Gestión de usuarios</h3></li>
</li>
<li>
<li><h3>Salir</h3></li>
</li>
</ul>
</div>
</li>
</ul>
</div>
--------------------CSS
.verticalaccordionIndex>ul {
padding: 0;
list-style: none;
width: 140px;
float: left;
position: relative;
top: -55px;
border-left: 1px solid;
left: 20px;
}
.verticalaccordionIndex>ul>li {
display: block;
height:30px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
text-align:center;
width: 140px;
background-color:TRANSPARENT;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
float: left;
position: absolute;
z-index: 200;
height:40px;
}
.verticalaccordionIndex img{
float: left;
width: 3%;
height: auto;
display: block;
position: absolute;
top: 206px;
left: 63px;
z-index: 30;
}
.verticalaccordionIndex .archiv {
float: right;
width: 3%;
height: auto;
display: block;
position: absolute;
top: 206px;
left: 203px;
z-index: 60;
cursor: pointer;
}
.verticalaccordionIndex>ul>li>h3 {
display: block;
margin-top: 2em;
padding: 0;
top: -27px;
position: relative;
color: #000;
cursor: pointer;
font-family: 'Forum', sans-serif;
font-size:18px;
text-decoration:none;
background: TRANSPARENT;
width: 140px;
text-align: center;
}
.verticalaccordionIndex>ul>li>div {
margin: 0;
width: 220px;
position: relative;
left: -10px;
top: -40px;
}
.verticalaccordionIndex>ul>li:hover, .verticalaccordionIndex>ul>li:focus {
height: auto;
width: 200px;
}
.verticalaccordionIndex:hover>ul>li:hover>h3 {
color: #000;
background: #000;
height: 0;
top: -28px;
}
.verticalaccordionIndex>ul>li>h3:hover {
cursor:pointer;
}
.subverticalaccordionIndex>ul>li { /* definimos cada item de la lista */
height:40px; /* la altura de las pestañas */
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
text-align:left;
width: 220px;
background-color: #9a8d84;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
position: relative;
left: -31px;
color: white;
height: auto;
}
.subverticalaccordionIndex>ul>li>div { /* el contenido oculto */
margin: 0;
overflow: auto;
padding: 10px;
float: left;
}
.subverticalaccordionIndex>ul{
position: relative;
top: 19px;
}
.subverticalaccordionIndex>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
height: auto;
display: block;
position: relative;
}
.content-li{
list-style: none;
color: white;
border-bottom: 1px solid white;
width: 100%;
position: relative;
left: -30px;
cursor: pointer;
font-family: 'Forum', sans-serif;
font-size: 1em;
}
.content-li a{
color: white;
text-decoration: none;
}
.content-li:hover, .content-li:focus{
background-color: #DCCCC1;
color: #e86308;
}
.subverticalaccordionIndex>ul>li>h3{
margin-bottom: 0.3em;
margin-left: .5em;
}
.subverticalaccordionIndex>ul>li>h3>a{
width: auto;
cursor: pointer;
font-size: 1.1em;
font-family: 'Forum', sans-serif;
width: 140px;
background-color: #9a8d84;
color:#DCCCC1;
width: auto;
}
.subverticalaccordionIndex>ul>li>h3>a:hover{
display: block;
color: #655448
}
.subverticalaccordionIndex>ul>li>a>h3 span{
float: left;
margin-right: 0;
}
.subverticalaccordionIndex>ul>li>h3:hover{
color:#fff;
background-color: #9a8d84;
}
.subverticalaccordionIndex>ul>li>h3>ul {
width: 75%;
}
subverticalaccordionIndex>ul>li>h3>ul.content-menu{
width: 90%;
}
subverticalaccordionIndex>ul>li>h3:hover{
display: block;
height: auto;
}

Answer 1

here is a demo illustrating menu dropdown on parent element hover. Please note this is not possible for onclick using pure css and without javascript.
css
.subverticalaccordionIndex .content-menu { display: none; }
.subverticalaccordionIndex li:hover .content-menu { background:red; display: block; }
<div class="verticalaccordionIndex">
<img src="Images/botones/ficheros-btn.png" class="verticalaccordion">
<ul>
<li>
<h3>FICHEROS</h3>
<div class="subverticalaccordionIndex">
<ul>
<li>
<h3>Cambio de centro <span>+</span></h3>
<ul class="content-menu">
<li class="content-li">Festivos</li>
<li class="content-li">Áreas de trabajo</li>
<li class="content-li">Centros</li>
<li class="content-li">Actividades</li>
<li class="content-li">Espacio de trabajo</li>
<li class="content-li">Cierre de espacios</li>
<li class="content-li">Trabajadores</li>
<li class="content-li">Convenio</li>
</ul>
</li>
<li>
<h3> Gestión de usuarios</h3>
</li>
<li>
<h3>Salir</h3>
</li>
</ul>
</div>
</li>
</ul>
</div>

Answer 2

I tried your code but it is wrong.
You have to know that each <ul> can only contains <li>. But each <li> can contains <ul>
Example :
<ul>
<li>
Company
<ul>
<li>Our team</li>
<li>About</li>
</ul>
</li>
</ul>
You forgot to close some markers or you have opened too many.
I think your problem is here.
Because of that I don't know what you want to do. Like "Sai Deepak" said on your post, provide us any fiddle, because it is hard to understand.
But first, try to correct your code.