applying css to menu

[AA_9925011]

Hi 

I am trying to change the text color of the menu  using custom CSS while hovering but not getting any solutions can somebody help on this..

Thanks in advance

[yhan]

Hi @AA_9925011,

Why not using Style Properties > MenuHoverStyle to change font color when hovering the menu widget?

Thanks,

/Yoyo

[AA_9925011]

We are trying for dynamic color change on the menu text while hovering..we
have already tried with style themes that dint work so trying with css code.

Thanks in advance.

[yhan]

You can try below css code, it takes effect in my environment:

.widget-menu-runtime:not([themable]) .widget-menu li:hover span{
color:red;
}

[AA_9925011]

I tried this code ,but it is not working.

[yhan]

I'm not sure whether you use a menu widget to build the menu, could you follow the below steps and let us know the CSS element of your menu?

1.Run Preview of your mashup
2.Press F12 on the keyboard to open Developer Tools
3.In Elements, use "ctrl+shift+c" to select an element on the page to inspect it
4.In Preview window move mouse cursor hover menu widget
5.We can see the CSS class, make the screenshot, and provide it to us

[AA_9925011]

please find the screenshots attached

[Sruthi · Accepted solution]

This code is working for me. Try it

.widget-menu-runtime:not([themable]) .widget-menu li:hover {
background: rgb(229, 229, 229);
filter: none;
-webkit-text-fill-color: blue;
}