Q:

CSS Highlight list entries

I've created a simple list as follows :

.menu ul {
  font-size:20px;
  margin-left:0;
  list-style: none;
  padding-left:5px;

}

.menu li {
  position: relative;
  padding-left: 3em;
  margin: 0.45em 0;
  list-style: none;
  line-height: 1.8em;
  font-size:20px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu li:hover {
  color: #2693ff;
}

.menu li:after {
  position: absolute;
  top: 2.1em;
  left: 0.9em;
  width: 2px;
  height: calc(100% - 2em);
  content: '';
  z-index: 0;
}

.menu li li {
  font-size:20px;
}
    <ul class="menu">
      <li class="menu"><span class="icon-indent"></span>Learn HTML</li>
      <li class="menu"><span class="icon-indent"></span>Create my own web site:
        <ol>
          <li class="menu"><span class="icon-indent"></span>Development Articles</li>
          <li class="menu"><span class="icon-indent"></span>News and Stuff</li>
          <li class="menu"><span class="icon-indent"></span>Funny Cat Pictures</li>
        </ol>
      </li>
      <li class="menu"><span class="icon-indent"></span>PROFIT</li>
      <li class="menu"><span class="icon-indent"></span>PROFIT
      <li class="menu"><span class="icon-indent"></span>Create my own web site:
        <ol>
          <li class="menu"><span class="icon-indent"></span>Development Articles</li>
          <li class="menu"><span class="icon-indent"></span>News and Stuff</li>
          <li class="menu"><span class="icon-indent"></span>Funny Cat Pictures</li>
        </ol>
      </li>
      <li class="menu"><span class="icon-indent"></span>Funny Cat Pictures</li>
    </ul>

Using CSS I can highlight each entry as I hover over it.  
However if I hover over the main entry of a nested list or an individual entry within the nested list, all entries within that nested level are highlighted along with it's main entry.
Is there any way to do this so only the entry I'm hovering over is highlighted and not all entries with in the nested list?
FIDDLE HERE showing the issue

A:

https://jsfiddle.net/hba5jgxb/1/
Wrap the text of each item in a tag, then apply CSS hover for it:
<li class='menu'>
  <span class="icon-indent"></span>
  <span class="item-text">Learn HTML</span>
</li>

.item-text:hover {
  color: #2693ff;
}

A:

Set color black on menu li. See if this helps.
.menu li {
    position: relative;
    padding-left: 3em;
    margin: 0.45em 0;
    list-style: none;
    line-height: 1.8em;
        font-size:20px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
     color: #000000; <-- ADD THIS
 }

https://jsfiddle.net/2t3cqr5m/

