Change text color on hover

Question

I have a menu, which is giving me a small issue as I am only able to change the text color if I hover directly on the text. I would like the text color to change even if I don't hover directly on the text.

 #accordian { width: 265px; color: #303030; float: left; text-transform: uppercase; background: #f1f1f1; } #accordian a { color: #303030; } #accordian a:hover { color: white; } #accordian h4 { font-size: 13px; line-height: 50px; margin: 0px; padding: 0px 23px 10px; cursor: pointer; text-transform: uppercase; } #accordian .main_list { list-style: outside; } .main_list:nth-child(odd):hover, .main_list:nth-child(even):hover { background: #13223d; background: orange; color: blue; } .main_list:nth-child(even) { background: #f1f1f1; } .main_list:nth-child(odd) { background: #e4e4e4; } #accordian ul ul li a { color: #303030; text-decoration: none; display: block; font-size: 13px; line-height: 50px; padding: 0 43px; text-transform: uppercase; /* transition for smooth animation*/ transition: all 0.15s; } #accordian ul ul li a:hover { background: #13223d; color: #fffff; border-left: 10px solid #3766b9; } #accordian ul ul li a { color: #303030; text-decoration: none; display: block; font-size: 13px; line-height: 50px; padding: 0 43px; text-transform: uppercase; /* transition for smooth animation*/ transition: all 0.15s; } #accordian ul ul li:hover { background: #13223d; color: #fffff; border-left: 10px solid #3766b9; } 

 <div class='dashlist' id='accordian'> <ul> <li class='main_list'> <h4><a href=''>utställning</a></h4> <ul class='sublist'> </ul> </li> <li class='main_list'> <h4><a href=''>köpvillkor</a></h4> <ul class='sublist'> </ul> </li> </ul> </div> 

Answer 1

Try adding the following style into your CSS. Please also correct some of the values #fffff is not valid, you need another f in there.

#accordian ul li:hover a {
  color: #ffffff;
}

 #accordian { width: 265px; color: #303030; float: left; text-transform: uppercase; background: #f1f1f1; } #accordian a { color: #303030; } #accordian a:hover { color: white; } #accordian h4 { font-size: 13px; line-height: 50px; margin: 0px; padding: 0px 23px 10px; cursor: pointer; text-transform: uppercase; } #accordian .main_list { list-style: outside; } .main_list:nth-child(odd):hover, .main_list:nth-child(even):hover { background: #13223d; background: orange; color: blue; } .main_list:nth-child(even) { background: #f1f1f1; } .main_list:nth-child(odd) { background: #e4e4e4; } #accordian ul ul li a { color: #303030; text-decoration: none; display: block; font-size: 13px; line-height: 50px; padding: 0 43px; text-transform: uppercase; /* transition for smooth animation*/ transition: all 0.15s; } #accordian ul ul li a:hover { background: #13223d; color: #ffffff; border-left: 10px solid #3766b9; } #accordian ul ul li a { color: #303030; text-decoration: none; display: block; font-size: 13px; line-height: 50px; padding: 0 43px; text-transform: uppercase; /* transition for smooth animation*/ transition: all 0.15s; } #accordian ul ul li:hover { background: #13223d; color: #ffffff; border-left: 10px solid #3766b9; } #accordian ul li:hover a { color: #ffffff; } 

 <div class='dashlist' id='accordian'> <ul> <li class='main_list'> <h4><a href=''>utställning</a></h4> <ul class='sublist'> </ul> </li> <li class='main_list'> <h4><a href=''>köpvillkor</a></h4> <ul class='sublist'> </ul> </li> </ul>