0

Lo que quiero hacer es que el último de mis menús que he creado hiciera un efecto donde aparecieran submenus hijos. Una funcionalidad básica en un menú básico y sencillo

Codigo HTML

<div id="containerMenuFirst" class="col-md-12">
<section id="sectionMenu" class="col-md-6 offset-md-6">


<ul class="ulMenuFirst">
    <a href="#" class="TagAMenu"><li tabindex="0" class="liMenuSecond">Menu 1</li></a>
    <a href="#" class="TagAMenu"><li tabindex="1"  class="liMenuSecond">Menu 2</li></a>
    <a href="#" class="TagAMenu"><li tabindex="2"  class="liMenuSecond">Menu 3</li></a>
    <a href="#" class="TagAMenu"><li tabindex="3"  class="liMenuSecond">Menu 4</li></a>
    <a href="#" class="TagAMenu" ><li tabindex="4"  class="liMenuSecond" id="viewMore">Ver Mas

<ul class="subUlSecond" id="SubMenuFirst">
    <a href="#" class="TagAMenu"><li class="liMenuSecond">SubMenu 1</li></a>
</ul>

    </li></a>
</ul>

</section>
</div>

Código CSS

@font-face {
    font-family: FontDance;
    src: url("fonts/dancing.ttf");
}



.ulMenuFirst {
    list-style: none;
}

.TagAMenu {
    text-decoration: none;
    color:black;
}

.TagAMenu:hover {
    text-decoration: none;
    color: white;
}

.liMenuSecond{
    float: left;
height: 50px;
width: 80px;
line-height: 50px;
text-align: center;
background-color: #E8C5C8;
font-family: FontDance;
}

.liMenuSecond:hover{
background-color: #AAE8E2;
}

:nth-child(1):focus{
background-color: #AAE8E2;
}


.subUlSecond {
    list-style: none;
    margin-left: -50%;
    display:none;
}



#viewMore:hover ~.subUlSecond{
display:block;
}

Si dejo asi mi código los hijos de mi último elemento html no se muestran también lo intente de las siguientes formas:

Forma 2:

#viewMore:hover +.subUlSecond{
display:block;
}

Forma 3:

#viewMore:hover .subUlSecond{
display:block;
}

2 respuestas 2

1

En primer lugar, debes comenzar conociendo, que la forma de maquetar el menú, es indebida, ya que lo haces anidando los <li> dentro de los <a> y debe ser al contrario.

Lo haces así:

<ul>
 <a>
  <li> </li>
 </a>
</ul>

Y debe ser:

<ul>
 <li>
  <a> </a>
 </li>
</ul>

Segundo (después de corregir lo anterior), la lógica detrás de un menú desplegable, vía css como lo estas intentando hacer tú, es de esta manera:

Html:

<ul>
 <li>
   <a></a>
   <ul>
    <li>
      </a></a>
    <li>
   </ul>
 </li>
</ul>

Y el CSS:

li ul{
  display: none;
}

li:hover ul{
  display: block;
} 

La anterior es la forma más recomendada, ya que el submenú, no se esconderá por error cuando estés sobre este, ya que hace parte del elemento <li> contenedor y siempre vas a estar sobre este.

La elección del selector ~ es para cuando quieres afectar elementos hermanos y es una variante, que también puede ser útil, pero vas a tener problema para seleccionar opciones del menú porque este esconderá una vez intentes ponerte encima del submenú. Sin embargo a ti no te funciona, porque el elemento que activa la aparición del submenú, no se encuentra al lado del submenú, sino que lo envuelve.

Así lo tienes tú:

<ul>
 <li>
   <a><!--Este elemento envuelve el submenú-->
     <ul>
       <li>
         </a></a>
       <li>
     </ul>
   </a>
 </li>
</ul>

Y debería ser:

<ul>
 <li>
   <a></a>
   <!--Cómo  ves el submenú está al mismo nivel del enlace-->
   <ul>
     <li>
      </a></a>
     <li>
   </ul>
 </li>
</ul>

Entonces, repasando:

El selector css, para la primera versión donde el submenu esta anidado en el enlace debería ser:

a:hover ul{
  display: block;
}

O también puede perfectamente ser:

li:hover ul{
  display: block;
}

Y en el segundo caso, siendo elementos hermanos:

a:hover ~ ul{
  display: block;
}

Teniendo claras las bases del error y la forma de solucionarlo, te presento la demo con tu mismo código pero con la maquetación html que te recomiendo y el selector css que debería ser:

@font-face {
    font-family: FontDance;
    src: url("fonts/dancing.ttf");
}



.ulMenuFirst {
    list-style: none;
}

.TagAMenu {
    text-decoration: none;
    color:black;
}

.TagAMenu:hover {
    text-decoration: none;
    color: white;
}

.liMenuSecond{
    float: left;
height: 50px;
width: 80px;
line-height: 50px;
text-align: center;
background-color: #E8C5C8;
font-family: FontDance;
}

.liMenuSecond:hover{
background-color: #AAE8E2;
}

:nth-child(1):focus{
background-color: #AAE8E2;
}

.subUlSecond {
  list-style: none;
  margin-left: -50%;
  display:none;
}

.liMenuSecond:hover .subUlSecond{
  display: block;
}
<div id="containerMenuFirst" class="col-md-12">
<section id="sectionMenu" class="col-md-6 offset-md-6">


<ul class="ulMenuFirst">
  <li tabindex="0" class="liMenuSecond"><a href="#" class="TagAMenu">Menu 1</a></li>
  <li tabindex="1"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 2</a></li>
  <li tabindex="2"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 3</a></li>
  <li tabindex="3"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 4</a></li>
  <li tabindex="4"  class="liMenuSecond" id="viewMore">
    <a href="#" class="TagAMenu" >
      Ver Mas
    </a>
    <ul class="subUlSecond" id="SubMenuFirst">
        <a href="#" class="TagAMenu"><li class="liMenuSecond">SubMenu 1</li></a>
    </ul>
  </li>
</ul>

</section>
</div>

Y por último, si los elementos son hermanos, pero con el error que te explique arriba:

@font-face {
    font-family: FontDance;
    src: url("fonts/dancing.ttf");
}



.ulMenuFirst {
    list-style: none;
}

.TagAMenu {
    text-decoration: none;
    color:black;
}

.TagAMenu:hover {
    text-decoration: none;
    color: white;
}

.liMenuSecond{
    float: left;
height: 50px;
width: 80px;
line-height: 50px;
text-align: center;
background-color: #E8C5C8;
font-family: FontDance;
}

.liMenuSecond:hover{
background-color: #AAE8E2;
}

:nth-child(1):focus{
background-color: #AAE8E2;
}

.subUlSecond {
  list-style: none;
  margin-left: -50%;
  display:none;
}

.TagAMenu:hover ~ .subUlSecond{
  display: block;
}
<div id="containerMenuFirst" class="col-md-12">
<section id="sectionMenu" class="col-md-6 offset-md-6">


<ul class="ulMenuFirst">
  <li tabindex="0" class="liMenuSecond"><a href="#" class="TagAMenu">Menu 1</a></li>
  <li tabindex="1"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 2</a></li>
  <li tabindex="2"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 3</a></li>
  <li tabindex="3"  class="liMenuSecond"><a href="#" class="TagAMenu">Menu 4</a></li>
  <li tabindex="4"  class="liMenuSecond" id="viewMore">
    <a href="#" class="TagAMenu" >
      Ver Mas
    </a>
    <ul class="subUlSecond" id="SubMenuFirst">
        <a href="#" class="TagAMenu"><li class="liMenuSecond">SubMenu 1</li></a>
    </ul>
  </li>
</ul>

</section>
</div>

Cualquier duda no olvides usar la caja de comentarios. Éxitos!

0

Si he comprendido bien, lo que quieres es que cuando el ratón se posicione en el item del menú con el texto "Ver Mas", se despliegue el submenú con el texto "SubMenu 1".

Asumiendo que estoy en lo cierto, la manera correcta de hacerse sería la que has titulado como Forma 3.

Si no te ha funcionado, debe de estar entrando en juego algún factor más que lo provoque. Te diría que uno de los factores podría ser el navegador con el que estás ejecutando la aplicación, pero al tratarse de una operación como bien has dicho, básica y sencilla, me parece que no van por ahí los tiros.

Mi segunda teoría es que podría ser debido a Bootstrap, que esté pisando tus reglas CSS con las suyas y que esto provoque que no obtengas el efecto deseado. Podrías probar añadiéndole un important a tu display: block:

#viewMore:hover .subUlSecond{
  display:block !important;
}

Te digo todo esto, porque probando tu código he obtenido el efecto que buscas, usando la Forma 3, por lo que hay algo que está afectando a tu código que al mío no lo hace (puedes ver mi prueba en https://jsfiddle.net/0hqw7z3d/6/)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.