How to Change Menu Hover Color

Change background colour of menu link when hovering over menu item

You should be able to do something like this:

ul li:hover a {
     color: #fff;
}

This targets the Link inside the menu item, when you hover over the list-item.

How to change color of hover on sub-menu

Here this should help, you need to add the "!" tag as shown below for background and color:

.navbar-inverse .dropdown-menu a:hover {
background: #CC3300 !important;
color: #fff !important; }

Best regards! Edited to change the hover to red and keep the font to white.

How to change menu hover color

You are using the MenuStrip class. You can override its renderer. Here's an example, pick your own colors please.

public partial class Form1 : Form {
    public Form1() {
        InitializeComponent();
        menuStrip1.Renderer = new MyRenderer();
    }

    private class MyRenderer : ToolStripProfessionalRenderer {
        public MyRenderer() : base(new MyColors()) {}
    }

    private class MyColors : ProfessionalColorTable {
        public override Color MenuItemSelected {
            get { return Color.Yellow; }
        }
        public override Color MenuItemSelectedGradientBegin {
            get { return Color.Orange; }
        }
        public override Color MenuItemSelectedGradientEnd {
            get { return Color.Yellow; }
        }
    }
}

Other properties of ProfessionalColorTable control other color elements.

change bootstrap navbar dropdown menu hover color

Try this:

Remove background-image and use background-color

 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-image:none !important;
 }
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color:red;
 }

DEMO

To Change the Arrow Color use this:

<span class="caret" style="color: red;"></span>

UPDATED DEMO

PrimeReact: change background color of Menubar items when on hover

If i understood correctly, you need this

.p-menuitem-active a {
    background: #000 !important;
}

or this depending on whether you want it for hover or on expand

.p-menuitem-link:hover {
    background-color: #000 !important;
}

How to change MenuItem focus/hover color

Ok, a little embarrassed. I had my layers messed up to where my stylesheet wasn't being applied like I thought it was.

So the correct way to change the menu-item's background color when focused is:

.menu-item:focused {
     -fx-background-color: #969A9F;
}

Once I found and sorted out my css layering problem, it now works as expected as result it:

---

Related Topics