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>By hovering over each item, the color of the item will change to red. However, there are some sub-items under Main3 and when I hover over Main3 only Main3 turns red. How can I make the number "3" in front of Main3 also turn red?