css - CSS 中的菜单 - 下拉菜单

Question

我的菜单有点问题。我打算做一个下拉菜单。因为我现在有代码，显示了

，但我的想法是通过单击或悬停“Cambio de centro”展开里面的

...有什么想法吗？

这是我的代码:

<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"><a href="#">Festivos</a></li>
          <li class="content-li"><a href="#">Áreas de trabajo</a></li>
          <li class="content-li"><a href="#">Centros</a></li>
          <li class="content-li"><a href="#">Actividades</a></li>
          <li class="content-li"><a href="#">Espacio de trabajo</a></li>
          <li class="content-li"><a href="#">Cierre de espacios</a></li>
          <li class="content-li"><a href="#">Trabajadores</a></li>
          <li class="content-li"><a href="#">Convenio</a></li>
    </ul>
  </li>
  <li>
   <h3> <a href="#">Gestión de usuarios</a></h3></li>    
  </li> 
    <li>
    <li><h3><a href="Login.aspx">Salir</a></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

这是一个演示，演示了父元素悬停时的菜单下拉菜单。请注意，对于使用纯 css 且不使用 javascript 的 onclick，这是不可能的。

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><a href="SelectCentro.aspx">Cambio de centro <span>+</span></a></h3>
                        <ul class="content-menu">
                            <li class="content-li"><a href="#">Festivos</a></li>
                            <li class="content-li"><a href="#">Áreas de trabajo</a></li>
                            <li class="content-li"><a href="#">Centros</a></li>
                            <li class="content-li"><a href="#">Actividades</a></li>
                            <li class="content-li"><a href="#">Espacio de trabajo</a></li>
                            <li class="content-li"><a href="#">Cierre de espacios</a></li>
                            <li class="content-li"><a href="#">Trabajadores</a></li>
                            <li class="content-li"><a href="#">Convenio</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3> <a href="#">Gestión de usuarios</a></h3>
                    </li>
                    <li>
                        <h3><a href="Login.aspx">Salir</a></h3>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>