How to select only a list in css?

Question

How to select only a list in css?

Navigation

#1 by (1 votes)

1

I made this menu, but the problem is that by having a submenu and by doing :hover in the li container of the sub li , the effect what did I do, apply to li contenedor and%% of% where the mouse is passing , how do you fix that problem?

#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>

css3

asked by Eduardo Sebastian 13.10.2017 в 03:54

source

1 answer

How to remove letters from a word? [closed] How can I include alertify.js in an .php file?

score 1 · Accepted Answer

Because of the structure of your html, where each <li> can contain multiple daughters <li> I'm not sure it's possible to achieve it only with CSS and the pseudoclass :hover since standing at any <li> daughter you'll be in the content of a <li> parent.

An alternative, using jQuery is:

When accessing a <li> add the class that represents the hover, invoking e.stopPropagation() so that the event mouseover does not spread to <li> containers.
By accessing a li we also remove the class that represents your parent's hover, since you could have accessed with the mouse first the li container (In the example, first to Computation, then to Javascript) .
When leaving a <li> we remove the class that represents the 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>