I am building a plugin that part of it has to do with styling the WordPress Dashboard Admin menu. I have everything all coded and working I am just stuck on this one piece.

I need to find the CSS class to override the background color when you hover over a menu item that has a submenu. For example, if you hover over "Plugins" and go to the submenu the background for the menu item "Plugins" is a black color. What is the CSS class to change that background color?

I have attached an image to reference:

I am building a plugin that part of it has to do with styling the WordPress Dashboard Admin menu. I have everything all coded and working I am just stuck on this one piece.

I need to find the CSS class to override the background color when you hover over a menu item that has a submenu. For example, if you hover over "Plugins" and go to the submenu the background for the menu item "Plugins" is a black color. What is the CSS class to change that background color?

I have attached an image to reference:

• css
• admin-menu
• dashboard

• Update: I was able to find it. In case anyone in the future is looking for it, here it the class #adminmenu li.opensub>a.menu-top,#adminmenu li>a.menu-top:focus – Kevin W. Commented Jul 10, 2018 at 1:07
• 1 Kevin: if you answered your own question, then it is useful to others to put your answer in the 'answer'. Along with how you figured out your answer. – Rick Hellewell Commented Jul 10, 2018 at 2:28

1 Answer 1

#adminmenu li.menu-top:hover,
#adminmenu li.opensub>a.menu-top,
#adminmenu li>a.menu-top:focus {
    position: relative;
    background-color: #191e23;
    color: #00b9eb;
}

Make sure your plugin is using the structure:

<li> <- position within admin menu is as a list item, using the <li> tag.

    <a>LINK</a> <- main link

    <ul> <- submenu container
        <li><a>submenu item here</a></li>
    </ul>
</li>

ofc dont put anything with those <- bits inside the code, it's just an example of structure! Hope it helps