CSS Help with Footer Menu Hover


I need help with the CSS for the footer menu on the bottom left of I'm able to get the hover and background color correct, but the menu items behind it still show. I need the sub-menu items to show up centered beneath the main menu item, similar to the attached image.

Also, can you help with the CSS to center all of the menu items, as shown in the attached image?

Currently, this is what I have so far:

.widget #menu-footer-main ul.sub-menu {

.widget #menu-footer-main li.menu-item-has-children:hover ul {
display: block;
position: absolute;
background-color: #000;
text-align: center

  • Rupok

    Hi LaunchGo

    I hope you had a wonderful day.

    Please use the following custom CSS code to make then centered aligned in 3 columns as you prefer.

    #menu-footer-main > li {
        text-align: center;
        width: 25%;

    For making sub-menus aligned centered, use the following custom CSS code:

    .sub-menu > li {
        background: #000 none repeat scroll 0 0;
        position: relative;
        width: 100%;
        z-index: 1000;

    You can use "Simple Custom CSS" plugin for using custom CSS codes. I can suggest you this plugin because it has 20000+ active installs.

    Have a nice day. Cheers!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.