Dropdown Menus Don’t Show

  • Resolved caligalml

    (@caligalml)


    8 years, 2 months ago

    Hello!

    Please help–my drop down menus (the sub menus) don’t show after hovering my mouse over them. I have exhausted my options. My menu structure looks correct in that the sub menus are indented following the main tabs. I have tried editing the header.php and theme.css files as well.

    From the header.php file I inserted depth
    <?php wp_nav_menu( array(‘theme_location’ => ‘main_menu’, ‘menu_class’ => ‘menu’, ‘depth’ => ‘2’)); ?>

    And the theme.css file I added
    #tiny li:hover > ul {
    display: block;
    visibility: visible;
    }

    #menu #tiny li ul ul {
    position: absolute;
    left: auto;
    right: -100%;
    z-index: 2;
    }

    I also tried adding this to the theme.css file
    body.home .sub-menu {
    display: block !important;
    }

    #tiny li:hover ul {
    display: block;
    visibility: visible;
    }

    #nav-main {
    overflow: visible;
    }

    Nothing has worked! Please help. The website I am trying to edit is https://chailaiorchid.com/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like there’s some JavaScript hiding the submenu items for some reason.
    Try installing a Custom CSS plugin and adding this CSS:

    
.page_head .menu li:hover > ul {
    display: block !important;
    visibility: visible !important;
}

    This will prevent that JavaScript from working just in case it affects other things.

    Thread Starter caligalml

    (@caligalml)

    Implemented! The drop down menus do show now when I hover over the main menu tabs, but they disappear as soon as I try to move my mouse down. Do you have a fix for that by any chance?

    I appreciate everything!

    Thread Starter caligalml

    (@caligalml)

    If you happen upon this thread in the near future, this is the code I’m toying with now!

    .page_head .menu li:hover > ul {
    display: block !important;
    visibility: visible !important;
    position:relative; top:0;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this code instead:

    
.page_head .menu li:hover > ul {
    display: block !important;
    visibility: visible !important;
}

.page_head .menu li:hover > ul:before {
    content: '';
    height: 20px;
    position: absolute;
    top: -20px;
    width: 100%;
}
    • This reply was modified 8 years, 2 months ago by Andrew Nevins.
    Thread Starter caligalml

    (@caligalml)

    Can I hug you?

    It works and it works beautifully! Thank you so much! Is there a review I can give or something I could do for you?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Haha thanks! Just a thank you is enough for us.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dropdown Menus Don’t Show’ is closed to new replies.

Tags