1

Hice este menú, pero el problema es que al tener un submenu y al hacer :hover en el li contenedor de los sub li, el efecto que hice, se aplica al li contenedor y al submenu por donde se está pasando el mouse, como se arregla aquel problema?

#menu a {
  text-decoration: none;
  font-family: monospace;
  color: #fff;
  font-size: 15px;
  display: block;
  font-weight: 600;
}
#menu ul {
 list-style: none;
 padding: 0;
 background-color: black;
 display: table;
 width: 101%;
}
#menu {
  list-style: none;
  padding: 0;
  background-color: black;
  display: table;
  width: 100%;
}

#menu > li {
  float: left;
  width: calc(100%/3);
}
#menu li:hover {
  background-color: green;
  transition: .8s;
}


#menu li {
  line-height: 3em;
  text-align: center;
  position: relative;
}

#menu li ul {
  position: absolute;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="cp.html">Computación</a>
<ul>
<li><a href="js.html">Javascript</a>
<li><a href="fp.html">Fundamentos</a>
</ul>
</li>
<li><a href="cp.html">Acerca</a>
<ul> 
</nav>
</body>
</html>

1 respuesta 1

1

Por la estructura de tu html, donde cada <li> puede contener como hijas multiples <li> no estoy seguro de que sea posible lograrlo únicamente con CSS y la pseudoclase :hover ya que parado en cualquier <li> hija estarás en el contenido de un <li> padre.

Una alternativa, utilizando jQuery es:

  • Al acceder a un <li> agregarle la clase que representa el hover, invocando e.stopPropagation() para que el evento mouseover no se propague a <li> contenedoras.
  • Al acceder a un li tambien removemos la clase que representa al hover de su padre, ya que se pudo haber accedido con el mouse primero al li contenedor (En el ejemplo, primero a Computación, luego a Javascript).
  • Al salir de un <li> removemos la clase que representa al hover

$('li').on("mouseover",function(e){
    e.stopPropagation();
    $(this).addClass('menu-item-hover');
    $(this).parents("li").each(function(){
        $(this).removeClass('menu-item-hover');
    })
});


$('li').on("mouseleave",function(e){
    $(this).removeClass('menu-item-hover');
});
#menu a {
  text-decoration: none;
  font-family: monospace;
  color: #fff;
  font-size: 15px;
  display: block;
  font-weight: 600;
}
#menu ul {
 list-style: none;
 padding: 0;
 background-color: black;
 display: table;
 width: 101%;
}
#menu {
  list-style: none;
  padding: 0;
  background-color: black;
  display: table;
  width: 100%;
}

#menu > li {
  float: left;
  width: calc(100%/3);
}

.menu-item-hover{
  background-color: green;
  transition: .8s;
}


#menu li {
  line-height: 3em;
  text-align: center;
  position: relative;
}

#menu li ul {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">Inicio</a></li>
  <li><a href="cp.html">Computación</a>
    <ul>
      <li><a href="js.html">Javascript</a> </li>
      <li><a href="fp.html">Fundamentos</a></li>
    </ul>
  </li>
<li><a href="cp.html">Acerca</a>
<ul> 
</nav>
</body>
</html>

2
  • Que ingeniosa tu respuesta ,pero lo resolví haciendo el hover a los links <a>
    – ESCM
    el 13 oct. 2017 a las 2:32
  • Eso es bastante mas sencillo :P el 13 oct. 2017 a las 2:34

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.