dropdown menu disappearing ?

[Dennis]

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.

<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

 

[Johna]

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.

 

[tomliv]

I'd suggest not using hover to open the menu. From an accessibility stand point, it's better to open menu with click.