Hover over tab text not changing

I’m using Canvas with Woocommerce and igniteWoo pro tab control. Trying to make tabs mimic my nav menu settings. Using custom css as follows.

div.product .woocommerce-tabs ul.tabs li.active a, #content div.product .woocommerce-tabs ul.tabs li.active a { color:#ffffff !important; background:#none !important;

}

div.product .woocommerce-tabs ul.tabs li a, #content div.product .woocommerce-tabs ul.tabs li a { color:#555555 !important;

}

div.product .woocommerce-tabs ul.tabs li.active a, #content div.product .woocommerce-tabs ul.tabs li.active a { color:#ffffff !important; background:#none !important;

}

div.product .woocommerce-tabs ul.tabs li { background:#none !important;

}

div.product .woocommerce-tabs ul.tabs a:hover {
background: #555555;
color: #ffffff !important;

}

div.product .woocommerce-tabs ul.tabs li.active { background: #555555 !important;

}

a:hover { text-decoration: none;

}

I cannot get the text to #ffffff on hover, it remains #555555 same as background so it is not visible. I know I’m overlooking something simple and cannot find solution anywhere after many hours of searching and trying different css. My website is set to under construction until completion. I’m still a noob and need a solution or a link to one. Thank You