Puedo hacer que mi menú desplegable funcione perfectamente, el único problema es que tengo problemas para tratar de descubrir cómo puedo agregar otro nivel desplegable.

Por ejemplo, quiero que se despliegue otro nivel cuando pase el mouse sobre Test3. ¿Qué me falta en el código para hacerlo?

Css:

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
</style>

Html:

<nav>
<ul id="menu">

<li class="dropdown">
<a href="#" class="dropbtn">Location</a>
<div class="dropdown-content">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>  
</ul>
</nav>
1
Dr.Prog 21 mar. 2017 a las 22:45

2 respuestas

La mejor respuesta

¿Quizás no cerraste la etiqueta li? Colocar un div dentro del li parece complicar las cosas. Creo que es más fácil si creas un nuevo nivel, simplemente envuelve todo en un bucle ul-li-ul. Me gusta esto:

<ul id="menu">
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">DROPDOWN 1</a>
      <ul>
        <li><a href="#">SOMETHING LV2</i></a></li>
        <li><a href="#">DROPDOWN 2</i></a>
          <ul>
            <li><a href="#">SOMETHING LV3</a></li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

Luego, escóndelo y muestra cuando pases el mouse por encima:

#menu li ul{
    display: none;
}
#menu li:hover>ul{
    display: block;
    position: absolute;
    width: 100%;
}

Para que pueda tener dos o tres niveles, no hay problema. Consulte el ejemplo de violín: https://jsfiddle.net/fp1x1v05/ Espero que esto ayude.

2
Anh K 21 mar. 2017 a las 20:23

Lo sentimos, publiqué una respuesta antes de que eso no aislara los enlaces.

Lo que desea hacer, idealmente, es eventos de desplazamiento del objetivo en elementos que envuelven enlaces, luego use un poco más de especificidad en sus selectores.

Prueba éste:

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content ul li {
    display: none;
}
.dropdown:hover .dropdown-content li:hover ul li {
    display: block;
}
</style>
<nav>
<ul id="menu">

<li class="dropdown">
<a href="#" class="dropbtn">Location</a>
<ul class="dropdown-content"><li><a href="#">Test1</a><ul><li>Subtest 1</li></ul></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li></ul>
</ul>
</nav>
0
Judd Franklin 21 mar. 2017 a las 20:04