Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

dropdown menu disappearing ?

Dennis

New Coder
Hi all,

I've been working on my website performance all week. Lots of research and technical support. I have a wordpress website, dennisroliff.com . I've finally gotten the site to load at an acceptable speed.
Now, the issue is with the main menu. In particular the dropdown menu under 'galleries'. I'm finding that if I move my cursor down the dropdown menu too quickly, it disappears. This would be very frustrating for a potential client. My mind is pretty burned out at the moment. I realize this might be an easy fix but I just can't process it right now.

HTML:
<nav id="navigation" class="clearfix">
  <div class="menu">
    <ul id="menu" class="clearfix be-nav-link-effect-2">
      <li id="menu-item-4905" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4905">
        <a title="home" href="https://dennisroliff.com/" aria-current="page">home</a>
      </li>
      <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a title="about" href="https://dennisroliff.com/about/">about</a></li>
      <li id="menu-item-107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-107">
        <a title="galleries" href="#">galleries</a> <span class="mobile-sub-menu-controller"><i class="icon-icon_plus"></i></span>
        <ul class="sub-menu clearfix">
          <li id="menu-item-7175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7175"><a title="INTERIOR IMAGES" href="https://dennisroliff.com/interior-images/">INTERIOR IMAGES</a></li>
          <li id="menu-item-5690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5690"><a title="FASHION IMAGES" href="https://dennisroliff.com/fashion/">FASHION IMAGES</a></li>
          <li id="menu-item-10928" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10928"><a title="FOOD IMAGES" href="https://dennisroliff.com/food-samples/">FOOD IMAGES</a></li>
          <li id="menu-item-12665" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12665"><a title="FAMILY PORTRAITS" href="https://dennisroliff.com/family-portraits/">FAMILY PORTRAITS</a></li>
          <li id="menu-item-10698" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10698"><a title="VIDEOS" href="https://dennisroliff.com/videos/">VIDEOS</a></li>
          <li id="menu-item-9500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9500"><a title="COMMERCIAL" href="https://dennisroliff.com/commercial/">COMMERCIAL</a></li>
          <li id="menu-item-3290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3290"><a title="FLASHES OF HOPE" href="https://dennisroliff.com/flashes-of-hope/">FLASHES OF HOPE</a></li>
          <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a title="CW PROPERTIES INC." href="https://dennisroliff.com/commonwealth-properties-inc/">CW PROPERTIES INC.</a></li>
          <li id="menu-item-4884" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4884">
            <a title="NEW DIGITAL WORKFLOW" href="https://dennisroliff.com/new-digital-workflow-a-work-in-progress/">NEW DIGITAL WORKFLOW</a>
          </li>
          <li id="menu-item-10054" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10054">
            <a title="PRODUCTION" href="#">PRODUCTION</a> <span class="mobile-sub-menu-controller"><i class="icon-icon_plus"></i></span>
            <ul class="sub-menu clearfix">
              <li id="menu-item-6801" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6801"><a title="MODEL SHOOT" href="https://dennisroliff.com/taylor-piatt-composite-production/">MODEL SHOOT</a></li>
              <li id="menu-item-6680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6680"><a title="AKRON CIVIC PROJECT" href="https://dennisroliff.com/production-first-energy/">AKRON CIVIC PROJECT</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Any suggestions?

Thanks.

Dennis
 
Last edited by a moderator:
Are you using CSS or JavaScript to open/close the menu?
If CSS, you can use a transition delay to close the menu after some amount of time.
If JavaScript, then you can use setTimeout to wait a certain amount of time before closing the menu.
 
Back
Top Bottom