Change text color on hover
<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='dashlist' id='accordian'&gt;
  &lt;ul&gt;
    &lt;li class='main_list'&gt;
      &lt;h4&gt;&lt;a href=''&gt;utställning&lt;/a&gt;&lt;/h4&gt;
      &lt;ul class='sublist'&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class='main_list'&gt;
      &lt;h4&gt;&lt;a href=''&gt;köpvillkor&lt;/a&gt;&lt;/h4&gt;
      &lt;ul class='sublist'&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>