Hover on child li should take full background width of parent

Question

I have nested list items, to show its nested li i'm giving padding left to 25px;

When i hover on nested li(class = .child), i want to show background to red and wants it background to start from left parent edge, because of padding(25px), it is just showing background from child edge.

here in my demo if i say it, red hover(123, 456, 789) should start from li(Abc)

ul {
  list-style:none; 
}
.child {
  padding-left:25px;
}

li {
  line-height:1.5;
  border-bottom:0.5px solid wheat;
  cursor:pointer;
}
li:hover.child {
  background:red;
}
.ol {
  border-bottom:0.5px solid red;
}
.ol:hover {
   background:blue;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  
    <ul>
    <li class="dept"> 
      <div class="ol"> Abc </div>
      <ul>
        <li class="child"><a><spa>123</span></a></li>
        <li class="child"><spa>456</span></a></li>
        <li class="child"><spa>789</span></a></li>
      </ul>
    </li>
    <li class="dept">Efg</li>
  </ul>


</body>
</html>

The `ul` element gets a default `padding-left` from the browser stylesheet, so you need to overwrite that. — CBroe, Apr 27 '20 at 09:06
Please clarify in your question that your problem is with the default padding-left of the `ul` tag, because as it stands the accepted answer removes that padding while it is never mentioned in the question. — Stephane Vanraes, Apr 27 '20 at 09:54
@StephaneVanraes if i would have know this before, then why will i create this question :D — jsduniya, Apr 27 '20 at 10:18
I mean that the answer moves the entire li element to the left so that the underline is aligned with Abc, while from the question that is not clear: it only mentions the background on hover and does not ask to move the underline part as well :) — Stephane Vanraes, Apr 27 '20 at 10:20

score 4 · Accepted Answer · answered Apr 27 '20 at 09:07

You can fix this by adding

 padding-inline-start: 0;

to your ul, updated fiddle:

ul {
  list-style:none; 
  padding-inline-start: 0;
}
.child {
  padding-left:25px;
}

li {
  line-height:1.5;
  border-bottom:0.5px solid wheat;
  cursor:pointer;
}
li:hover.child {
  background:red;
}
.ol {
  border-bottom:0.5px solid red;
}
.ol:hover {
   background:blue;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
    <ul>
    <li class="dept"> 
      <div class="ol"> Abc </div>
      <ul>
        <li class="child"><a><spa>123</span></a></li>
        <li class="child"><spa>456</span></a></li>
        <li class="child"><spa>789</span></a></li>
      </ul>
    </li>
    <li class="dept">Efg</li>
  </ul>


</body>
</html>

score 1 · Answer 2 · edited Apr 30 '20 at 06:40

I removed default padding from <ul>. Check this code.

ul {
  list-style:none; 
  padding-left:0;
}
.child {
  padding-left:25px;
}

li {
  line-height:1.5;
  border-bottom:0.5px solid wheat;
  cursor:pointer;
}
li:hover.child {
  background:red;
}
.ol {
  border-bottom:0.5px solid red;
}
.ol:hover {
   background:blue;
}
.dept{
padding-left:25px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
    <ul>
    <li class="dept"> 
      <div class="ol"> Abc </div>
      <ul>
        <li class="child"><a><spa>123</span></a></li>
        <li class="child"><spa>456</span></a></li>
        <li class="child"><spa>789</span></a></li>
      </ul>
    </li>
    <li class="dept">Efg</li>
  </ul>


</body>
</html>

score 0 · Answer 3 · answered Apr 27 '20 at 09:06

You can get this effect by adding a negative margin to the li on hover (and adapt the padding if you want it to still align with the other elements:

li:hover.child {
  background:red;
  margin-left: -40px;
  padding-left: 65px;
}

this is based on some default values, you might want to adjust and override the padding in the ul element to be the same on all browsers

Hover on child li should take full background width of parent

3 Answers3