1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Sub Menu Dissapearing

Discussion in 'Free Divi Community Forum' started by Ronnie Tanner, Dec 26, 2024.

  1. Ronnie Tanner

    Ronnie Tanner New Member

    https://www.fluoridefreelethbridge.com/

    When hovering over Info or Latest News the sub menu appears but if you attempt to go to a sub-menu item the submenu disappears. I've inherited this site and am no CSS expert.

    I do see this custom code but don't know what elements could be the culprit, if any.

    }

    /*---------------------[DROP DOWN MENU]-------------------*/

    #top-menu li li.menu-item-has-children > a:first-child:after {
    right: 20px;
    top: 12px;
    }


    #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
    content: " > ";
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 1px;
    transform: rotate(90deg);
    }
     
    #1 Ronnie Tanner, Dec 26, 2024
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  2. Divi Booster

    Divi Booster Divi Expert

    Hi Ronnie,

    You also have this CSS in the page:

    Code:
    Log In or Sign Up to view this code.
    It's causing a gap between the main menu and the submenu. When you try to move the mouse from the main menu link to the submenu, you are temporarily moving the mouse off either of them (and over the gap). As a result, the submenu disappears.

    To fix this, you can track down and remove that code. It's in Divi's combined CSS so it's a bit hard to say where it's actually being added - hopefully you recognize it.

    Otherwise you can override it with this:

    Code:
    Log In or Sign Up to view this code.
    You can add that in "WP Admin > Divi > Theme Options > General > Custom CSS".

    Hope that helps!
     
    #2 Divi Booster, Dec 26, 2024
  3. Acataseb

    Acataseb New Member

    from my point of view, it is working nicely on mac / chrome. Do you already applied Dan's suggestion about how to fix your problem ?
    Sometimes, it is just the DIVI's cache that cause trouble, especially if you have a cache plugin enable. You have to clear both.
    Have a nice day. :)
     
    #3 Acataseb, Dec 27, 2024
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  4. Ronnie Tanner

    Ronnie Tanner New Member

    Thanks, that did it!
     
    #4 Ronnie Tanner, Dec 30, 2024
  5. Divi Booster

    Divi Booster Divi Expert

    Glad to hear it, Ronnie! If there's anything else you need help with, just ask :)
     
    #5 Divi Booster, Jan 1, 2025
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  6. EmmaHannay

    EmmaHannay New Member

    Hi,
    I have a similar problem on my top menu but it is custom built and so I can't figure out what the CSS code should be to enable my gap to disappear.
    My site is https://stampedwithlove.uk/ if anyone wouldn't mind looking and seeing how I can fit it.
    Thanks,
    Emma
     
    #6 EmmaHannay, Mar 1, 2026
  7. Divi Booster

    Divi Booster Divi Expert

    Hey Emma,

    Your issue is slightly different - it's not a gap issue, but rather a z-index issue.

    The row containing your top menu and the row containing your main menu both have a z-index of 3. When two sibling elements have the same z-index, the later one will appear in front of the other. That's what's happening here - your main menu row is layered in front of the top menu (even though you can see some of the top menu through the transparent background of the main menu). So when you move your mouse over down the sub menu it crosses into the main menu row and the sub menu, being behind that, loses focus and closes.

    The solution is to increase the z-index on the top menu row. You could do it with this CSS:

    Code:
    Log In or Sign Up to view this code.
    But it would probably be better to set it in the settings for that row, at:

    Row Settings > Advanced > Position > Z-Index

    (set it to anything larger than 3, such as 4).

    Hope that helps!
     
    #7 Divi Booster, Mar 1, 2026
    EmmaHannay likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  8. EmmaHannay

    EmmaHannay New Member

    You're an absolute super start - thank you so much!!

     
    #8 EmmaHannay, Mar 3, 2026
  9. Divi Booster

    Divi Booster Divi Expert

    You're welcome, Emma :)
     
    #9 Divi Booster, Mar 3, 2026
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
(You must log in or sign up to post here.)