How not to allocate nested elements when using hover?

Here is a sample code:

ul.left-menu>li:hover{ background:#f5a51a; }

https://jsfiddle.net/9c4q72uj/ - full code

what I want to get:

enter image description here

help me fix

    2 answers 2

    Updated. You can not highlight the "li", and the link itself "a"

     body { background: #05294f; } ul.left-menu { list-style: none; margin: 0 0 8px 0; padding: 0; position: relative; } ul.left-menu li { padding: 0 0 0 20px; list-style: none; position: relative; } ul.left-menu li ul li a:before { content: "•"; color: #dadada; font-size: 21px; display: inline-block; vertical-align: middle; margin-right: 10px; } ul.left-menu li a { display: block; font-size: 100%; color: #fff; font-weight: bold; text-decoration: none; padding: 10px; } ul.left-menu li a:hover { background: #f5a51a; } 
     <ul class="left-menu"> <li><a href="/0.html">1</a> <ul> <li><a href="/1.html">1</a> <ul> <li><a href="/1.html">1.1</a> </li> <li><a href="/2.html">1.2</a> </li> </ul> </li> <li><a href="/3.html">3</a> </li> <li><a href="/4.html">4</a> </li> </ul> </li> <li><a href="/5.html">2</a> </li> <li><a href="/6.html">3</a> </li> </ul>

    • I thank, I will explain: the nested elements can also be allocated, but so that they do not stand out with the parent (just like mine now) - vasily_dumov
    • Then in the styles replace "ul.left-menu> li> a: hover" with "ul.left-menu li a: hover". Updated code - Darevill

     body > ul { position: relative; z-index: 0; } li { line-height: 1.5em; } a { display: block; } a:hover:before { content: ""; position: absolute; left: 0; right: 0; height: 1.5em; /* same as line-height */ background: silver; z-index: -1; } 
     <ul class="left-menu"> <li><a href="/0.html">1</a> <ul> <li><a href="/1.html">1</a> <ul> <li><a href="/1.html">1.1</a></li> <li><a href="/2.html">1.2</a></li> </ul> </li> <li><a href="/3.html">3</a></li> <li><a href="/4.html">4</a></li> </ul> </li> <li><a href="/5.html">2</a></li> <li><a href="/6.html">3</a></li> </ul> 

     li { line-height: 1.5em; } a { display: block; } a:hover { background: silver; } 
     <ul class="left-menu"> <li><a href="/0.html">1</a> <ul> <li><a href="/1.html">1</a> <ul> <li><a href="/1.html">1.1</a></li> <li><a href="/2.html">1.2</a></li> </ul> </li> <li><a href="/3.html">3</a></li> <li><a href="/4.html">4</a></li> </ul> </li> <li><a href="/5.html">2</a></li> <li><a href="/6.html">3</a></li> </ul>