Q:

How to make text become red color when mouse hover on it for nested list?

a {
  color:black;
}

a:hover {
  color:red;
}
<ol>
          <a href="#"><li>Main1</li></a>
          <a href="#"><li>Main2</li>
          <a href="#"><li>Main3
            <ol>
              <a href="#"><li>Sub1</li></a>
              <a href="#"><li>Sub2</li></a>
              <a href="#"><li>Sub3</li></a>
            </ol>
          </li></a>

          <a href="#"><li>Main4</li></a>
          <a href="#"><li>Main5</li></a>

          <a href="#"><li>Main6</li></a>
        </ol>

When mouse hover on each item, the color of item will become red.
However, I got some sub-item under Main3 and when I hover on Main3 only Main3 become red, how to make the number "3" which in front of main3 also become red? 

A:

Can you try this on your css.
ul li a, ol li a {text-decoration: none;}
ul li a:hover, ol li a:hover {color: #E8001F;}
Also, shouldn't it be the other way around?

somewhere 1
somewhere 2
somewhere 3

