html - How to hover child nodes separately in ul element? -

html ul element hovers child parent

ul li:hover {    background-color: pink;  }

<ul>    <li>1      <ul>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>        <li>1</li>      </ul>    </li>    <li>1</li>    <li>1</li>    <li>1</li>    <li>1</li>  </ul>

fiddle

i understood trying achieve this:

• when having children li hovered parent still remains child's same style.

so here snippet

li {    /* demo */    list-style: none;  }  li:hover {    color: red;    font-weight: 700  }  li:hover li {    color: none;    font-weight: 400  }  li:hover li:hover {    color: red;    font-weight: 700  }

<ul>    <li>1 - text      <ul>        <li>1 - text</li>        <li>1 - text</li>        <li>1 - text</li>        <li>1 - text</li>        <li>1 - text</li>      </ul>    </li>    <li>1 - text</li>    <li>1 - text</li>    <li>1 - text</li>    <li>1 - text</li>  </ul>