Menü in Css - Dropdown-Menü

Question

Ich habe ein kleines Problem mit meinem Menü. Ich habe vor, ein Pulldown-Menü zu machen. Wie ich jetzt den Code habe, wird die < li> angezeigt, aber die Idee ist per Klick oder per Hover "Cambio de centro" entfaltet die < li> das ist drinnen ... Irgendwelche Idee?

Dies ist mein 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"><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

hier ist ein Demo-Menü zeigt, Dropdown-Menü für Hover des übergeordneten Elements Bitte beachten Sie, dies ist nicht möglich für onclick mit reinem CSS und ohne 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><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>

Answer 2

habe ich versucht, Ihren Code, aber es ist falsch.

Sie müssen wissen, dass jede <ul> nur <li> enthalten kann. Aber jeder <li> Dose enthält <ul>

Beispiel:

<ul>  
    <li> 
     <a href="#">Company</a> 
     <ul> 
      <li><a href="#">Our team</a></li> 
      <li><a href="#">About</a></li> 
     </ul> 
    </li> 
</ul> 

Sie haben vergessen, einige Markierungen zu schließen, oder Sie haben zu viele geöffnet. Ich denke, dein Problem ist hier.

Deshalb weiß ich nicht, was Sie tun möchten. Wie "Sai Deepak" sagte auf Ihrem Post, stellen Sie uns jede Geige, weil es schwer zu verstehen ist.

Aber zuerst, versuchen Sie, Ihren Code zu korrigieren.