How to Change hover text color of menu bar item?

i am using iconic one theme for my new website. But while designing theme i am not able to change hover text color of menu bar. You can check it in the snap shot(i.e red colored circle). While navigating to sub menu the main menu text was invisible. how to solve website is .

The problem is that the :hover state is applied to the a element, which is not being hovered while your cursor is over the sub-menu items.
If the :hover was applied to the parenting li element it should work, because the sub-menu ul is a child of the li, so you are still hovering the li while over the sub-menu ul.

.themonic-nav li:hover > a { color: #fff ; }

Thanks for the reply, but while moving to sub menu the main menu text color was invisible. I am sharing a snap shot of this. Can you please explain with snap shot for this problem. Because i dont have much programming knowledge.

I believe Sam answered your question and gave you the answer! Did you not try the code he gave you? Or was that not what you expected?

As Sam said you need to change the child anchor colour while hovering the list item which means that the anchor remains highlighted while you traverse the submenu because you are still hovering the parent list item.

You also need to avoid changing the font-size on the submenu when you hover as that causes a horrible jiggle that will upset most users.

Add this code and test before replying again so that we know we are talking about the same thing :slight_smile:

.themonic-nav li:hover > a { color: #fff ; }
.themonic-nav li ul li a:hover{font-size:11px}

Thanks for reply… Now its working… :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.