CSS hover events not being picked up on submenu within a submenu

Question

On a site I'm working on, I have a submenu within a submenu. The level-2 submenu is taller than the parent level-1 submenu. I'm using css to basically say, if i'm hovering over the parent list item of the level-1 submenu, or the level-1 submenu itself, the level-1 submenu is visible, and i'm repeating the same thing for the level-2 submenu. But when the mouse leaves the bounds of the level-1 submenu, it seems like pointer events on the level-2 item are not being picked up anymore.

I understand this is really confusing to understand but you can see it in action on this sloppily-and-quickly-thrown-together staging site (I know it's not in its best state, please be patient for the styling to appear): http://kachinahouse.newbird.co/

Hover over All Categories, Native American Artifacts, and try to select a submenu item a bit down the list. The entire menu disappears as if hover events aren't being recieved as soon as you leave the bounds of the level-1 submenu.

• In safari, hover events on level-2 don't even seem to be registered.
• In chrome, level-2 hover events disappear when the mouse leaves the bounds of level-1
• In firefox, everything works as expected and the submenus stay open as long as I'm hovering over them.

Should be noted that I am not using display:none to hide the submenu items before their appearance, I'm using a combination of opacity, visibility and pointer-events:none so that I can use smooth fading transitions. I mention this because I'm wondering if my pointer-events might be mucking things up somehow...? I don't see how though.

Simplified example of my css:

.sub-menu-level-1 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

li:hover > .sub-menu-level-1,
li > .sub-menu-level-1:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

Am i doing something dumb, or is this some kind of browser issue?

I'd like to avoid using Javascript if possible, I just feel like it shouldn't be needed for something like this...

I have checked everywhere for pointer-events:none, overflow properties, z-index issues, etc...

Here's a copy and paste of the actual CSS/HTML

.menu-wrapper {
  background-color: @color-orange;
  color: @color-white;
  position: relative;

  .all-categories {
    position: absolute;
    top: 100%;
    order: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 30px, 0);
    transition: 0.1s ease-in-out;
    transition-property: transform, opacity, visibility;
    z-index: 9;
    background-color: @color-white;
    padding: 25px 45px;
    box-shadow: 2px 3px 19px rgba(0, 0, 0, 0.1);
    color: @color-black;

    .toggle-nav > ul {
      columns: 4;
      height: 100%;
      padding: 0;
      list-style: none;
      margin: 0;
      max-height: 450px;

      li {
        padding-right: 20px;
        break-inside: avoid;

        a {
          line-height: 1.2;
          display: block;
          padding: 20px 0;
        }

        .sub-menu {
          left: calc(~'100% - 20px');
          top: 0;
          border: 1px solid #DDDDDD;
          padding: 20px 30px;
          color: #666666;

          li {
            width: 100%;
            padding-right: 0;

            a {
              padding: 10px 0;
            }
          }
        }

        &.menu-item-has-children {
          &::after {
            display: none;
          }

          > a::after {
            content: "";
            display: inline-block;
            margin-left: 10px;
            width: 0;
            height: 0;
            border-left: 6px solid #B2B2B2;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
          }
        }
      }
    }
  }

  .see-all-categories {
    order: 1;
    color: @color-white;
    font-size: 18px;
    font-family: @font-main;
    font-weight: bold;
    position: relative;
    padding: 30px 10px 30px 0;

    &::after {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-bottom: 2px solid @color-white;
      border-right: 2px solid @color-white;
      transform: translateY(-50%) rotate(45deg);
      position: absolute;
      right: 0;
      top: 50%;
    }

    &:hover + .all-categories,
    + .all-categories:hover {
      opacity: 1;
      visibility: visible;
      pointer-events: initial;
      transform: translate3d(0, 0, 0);
    }
  }
}

<div class="all-categories">
  <ul>
    <li class="menu-item-has-children">
      <a href="/native-american-katsina-and-kachina-dolls">Kachina Dolls</a>
      <ul class="sub-menu">
        <li><a href="/native-american-katsina-and-kachina-dolls/antique-native-american-hopi-katsinam">Antique Native American Hopi Katsinam</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/hopi-full-figure-katsinam">Hopi Full Figure Katsinam</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/hopi-katsinam-sculptures">Hopi Katsinam Sculptures</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/hopi-miniature-katsinam">Hopi Miniature Katsinam</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/hopi-old-style-katsinam">Hopi Old Style Katsinam</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/kachinas-on-sale">Kachina and Katsina Dolls on SALE</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/navajo-kachinas">Navajo Kachinas</a></li>
        <li><a href="/native-american-katsina-and-kachina-dolls/new-acquisitions">New Acquisitions at Kachina House</a></li>
      </ul>
    </li>

    <li class="menu-item-has-children">
      <a href="/native-american-jewelry">Native American Jewelry</a>
      <ul class="sub-menu">
        <li><a href="/native-american-jewelry/native-american-necklaces">Native American Necklaces</a></li>
        <li><a href="/native-american-jewelry/native-american-bracelets">Native American Bracelets </a></li>
        <li><a href="/native-american-jewelry/native-american-rings">Native American Rings</a></li>
        <li><a href="/native-american-jewelry/native-american-earrings">Native American Earrings</a></li>
        <li><a href="/native-american-jewelry/native-american-buckle">Native American Buckles</a></li>
      </ul>
    </li>

    <li class="menu-item-has-children">
      <a href="/native-american-artifacts">Native American Artificats</a>
      <ul class="sub-menu">
        <li><a href="/native-american-artifacts/artifacts-on-sale">Artifacts On Sale</a></li>
        <li><a href="/native-american-artifacts/bows">Native American Bows</a></li>
        <li><a href="/native-american-artifacts/breastplates-and-chokers">Breastplates and Chokers</a></li>
        <li><a href="/native-american-artifacts/cradleboards">Cradleboards</a></li>
        <li><a href="/native-american-artifacts/dreamcatchers-and-medicine-wheels">Dreamcatchers and Medicine Wheels</a></li>
        <li><a href="/native-american-artifacts/warbonnets">Warbonnets</a></li>
        <li><a href="/native-american-artifacts/drums-and-flutes">Drums and Flutes</a></li>
        <li><a href="/native-american-artifacts/knives">Knives</a></li>
        <li><a href="/native-american-artifacts/hatchets-and-tomahawks">Hatchets and Tomahawks</a></li>
        <li><a href="/native-american-artifacts/lances-and-arrows">Lances and Arrows</a></li>
        <li><a href="/native-american-artifacts/dance-sticks-and-trail-markers">Dance Sticks and Trail Markers</a></li>
        <li><a href="/native-american-artifacts/medicine-bags-pouches-and-handbags">Medicine Bags, Pouches and Handbags</a></li>
        <li><a href="/native-american-artifacts/pipes">Pipes</a></li>
        <li><a href="/native-american-artifacts/prayer-fans">Prayer Fans</a></li>
        <li><a href="/native-american-artifacts/quivers">Quivers</a></li>
        <li><a href="/native-american-artifacts/rattles">Rattles</a></li>
        <li><a href="/native-american-artifacts/shields">Shields</a></li>
      </ul>
    </li>

    <li class="menu-item-has-children">
      <a href="/native-american-pottery">Native American Pottery</a>
      <ul class="sub-menu">
        <li><a href="/native-american-pottery/horsehair-pottery">Horsehair Pottery</a></li>
        <li><a href="/native-american-pottery/navajo-etched-pottery">Navajo Etched Pottery</a></li>
        <li class="menu-item-has-children">
          <a href="/native-american-pottery/specialty-pottery">Specialty Pottery</a>
          <ul class="sub-menu">
            <li><a href="/native-american-pottery/specialty-pottery/specialty-handbuilt-pottery">Specialty Hand-Coiled Clay Pottery</a></li>
            <li><a href="/native-american-pottery/specialty-pottery/specialty-ceramic-pottery">Specialty Slip-Poured Ceramic Pottery</a></li>
          </ul>
        </li>
        <li><a href="/native-american-pottery/specialty-pottery/specialty-handbuilt-pottery">Specialty Hand-Coiled Clay Pottery</a></li>
        <li><a href="/native-american-pottery/specialty-pottery/specialty-ceramic-pottery">Specialty Slip-Poured Ceramic Pottery</a></li>
        <li><a href="/native-american-pottery/sale-pottery">SALE-Pottery</a></li>
        <li><a href="/native-american-pottery/storytellers">Native American Storyteller Figurines</a></li>
        <li><a href="/native-american-pottery/wedding-vases">Wedding Vases</a></li>
      </ul>
    </li>

    <li><a href="/native-american-zuni-fetishes">Zuni Fetishes</a></li>
    <li><a href="/native-american-baskets">Native American Baskets</a></li>

    <li class="menu-item-has-children">
      <a href="/native-american-artists">Native American Artists</a>
      <ul class="sub-menu">
        <li><a href="/native-american-artists/dwight-armstrong">Dwight Armstrong</a></li>
        <li><a href="/native-american-artists/marc-bilagody">Marc Bilagody</a></li>
        <li><a href="/native-american-artists/cecil-calnimptewa-jr">Cecil Calnimptewa Jr.</a></li>
        <li><a href="/native-american-artists/larson-chapella">Larson Chapella</a></li>
        <li><a href="/native-american-artists/manuel-chavarria-jr">Manuel Chavarria Jr.</a></li>
        <li><a href="/native-american-artists/raymond-chee">Raymond Chee</a></li>
        <li><a href="/native-american-artists/norman-cuch">Norman Cuch</a></li>
        <li><a href="/native-american-artists/jason-curley">Jason Curley</a></li>
        <li><a href="/native-american-artists/randolph-david">Randolph David</a></li>
        <li><a href="/native-american-artists/neil-david-sr">Neil David Sr.</a></li>
        <li><a href="/native-american-artists/shawn-deel">Shawn Deel</a></li>
        <li><a href="/native-american-artists/dominic-east">Dominic East</a></li>
        <li><a href="/native-american-artists/john-fredericks">John Fredericks</a></li>
        <li><a href="/native-american-artists/joe-gash">Joe Gash</a></li>
        <li><a href="/native-american-artists/dorleen-gashweseoma">Dorleen Gashweseoma</a></li>
        <li><a href="/native-american-artists/ros-george">Ros George</a></li>
        <li><a href="/native-american-artists/gloria-gorman">Gloria Gorman</a></li>
        <li><a href="/native-american-artists/richard-gorman">Richard Gorman</a></li>
        <li><a href="/native-american-artists/andrew-grover">Andrew Grover</a></li>
        <li><a href="/native-american-artists/cimmaron-grover">Cimmaron Grover</a></li>
        <li><a href="/native-american-artists/arthur-holmes-jr">Arthur Holmes Jr.</a></li>
        <li><a href="/native-american-artists/brian-holmes">Brian Holmes</a></li>
        <li><a href="/native-american-artists/darian-honahnie">Darian Honahnie</a></li>
        <li><a href="/native-american-artists/troy-honahnie">Troy Honahnie</a></li>
        <li><a href="/native-american-artists/philbert-honanie">Philbert Honanie</a></li>
        <li><a href="/native-american-artists/lester-honanveama">Lester Honanveama</a></li>
        <li><a href="/native-american-artists/marlin-honhongva">Marlin Honhongva</a></li>
        <li><a href="/native-american-artists/kevin-honyouti">Kevin Honyouti</a></li>
        <li><a href="/native-american-artists/lauren-honyouti">Lauren Honyouti</a></li>
        <li><a href="/native-american-artists/ronald-honyouti-ron-honyouti">Ronald Honyouti (Ron Honyouti)</a></li>
        <li><a href="/native-american-artists/aaron-honyumptewa">Aaron Honyumptewa</a></li>
        <li><a href="/native-american-artists/orlan-honyumptewa">Orlan Honyumptewa</a></li>
        <li><a href="/native-american-artists/frankie-howard">Frankie Howard</a></li>
        <li><a href="/native-american-artists/milton-howard">Milton Howard</a></li>
        <li><a href="/native-american-artists/bryson-huma">Bryson Huma</a></li>
        <li><a href="/native-american-artists/allen-joshevama">Allen Joshveama</a></li>
        <li><a href="/native-american-artists/brendon-kayquoptewa">Brendon Kayquoptewa</a></li>
        <li><a href="/native-american-artists/d-armon-kootswatewa">D'Armon Kootswatewa</a></li>
        <li><a href="/native-american-artists/renford-koruh">Renford Koruh</a></li>
        <li><a href="/native-american-artists/gene-lalo">Gene Lalo</a></li>
        <li><a href="/native-american-artists/raynard-lalo">Raynard Lalo</a></li>
        <li><a href="/native-american-artists/ila-lou-lomawaima">Ila Lou Lomawaima</a></li>
        <li><a href="/native-american-artists/virgil-long">Virgil Long</a></li>
        <li><a href="/native-american-artists/sean-macias">Sean Macias</a></li>
        <li><a href="/native-american-artists/kevin-masawiestewa">Kevin Masawiestewa</a></li>
        <li><a href="/native-american-artists/larry-melendez">Larry Melendez</a></li>
        <li><a href="/native-american-artists/cecil-miles">Cecil Miles</a></li>
        <li><a href="/native-american-artists/aldrick-mooya">Aldrick Mooya</a></li>
        <li><a href="/native-american-artists/willard-mowa">Willard Mowa</a></li>
        <li><a href="/native-american-artists/augustine-mowa-iii">Augustine Mowa III</a></li>
        <li><a href="/native-american-artists/augustine-mowa-jr">Augustine Mowa Jr</a></li>
        <li><a href="/native-american-artists/henry-naha">Henry Naha</a></li>
        <li><a href="/native-american-artists/wayland-namingha">Wayland Namingha</a></li>
        <li><a href="/native-american-artists/hyram-namoki">Hyram Namoki</a></li>
        <li><a href="/native-american-artists/lawrence-namoki">Lawrence Namoki</a></li>
        <li><a href="/native-american-artists/adrian-nasafotie">Adrian Nasafotie</a></li>
        <li><a href="/native-american-artists/larin-nasafotie">Larin Nasafotie</a></li>
        <li><a href="/native-american-artists/bryan-nasetoynewa">Bryan Nasetoynewa</a></li>
        <li><a href="/native-american-artists/fawn-navasie">Fawn Navasie</a></li>
        <li><a href="/native-american-artists/brad-panteah">Brad Panteah</a></li>
        <li><a href="/native-american-artists/calvin-pavatea">Calvin Pavatea</a></li>
        <li><a href="/native-american-artists/ted-pavatea">Ted Pavatea</a></li>
        <li><a href="/native-american-artists/delmar-polacca">Delmar Polacca</a></li>
        <li><a href="/native-american-artists/clarina-poleahla">Clarina Poleahla</a></li>
        <li><a href="/native-american-artists/ryon-polequaptewa">Ryon Polequaptewa</a></li>
        <li><a href="/native-american-artists/tayron-polequaptewa">Tayron Polequaptewa</a></li>
        <li><a href="/native-american-artists/jerel-quamahongnewa">Jerel Quamahongnewa</a></li>
        <li><a href="/native-american-artists/coolidge-roy-jr">Coolidge Roy Jr.</a></li>
        <li><a href="/native-american-artists/eric-roy">Eric Roy</a></li>
        <li><a href="/native-american-artists/silas-roy">Silas Roy</a></li>
        <li><a href="/native-american-artists/alex-sanchez">Alex Sanchez</a></li>
        <li><a href="/native-american-artists/kevin-sekakuku">Kevin Sekakuku</a></li>
        <li><a href="/native-american-artists/shawn-sekaquaptewa">Shawn Sekaquaptewa</a></li>
        <li><a href="/native-american-artists/susan-shatreau-janisky">Susan Shatreau-Janisky</a></li>
        <li><a href="/native-american-artists/bennett-sockyma">Bennett Sockyma</a></li>
        <li><a href="/native-american-artists/donald-sockyma">Donald Sockyma</a></li>
        <li><a href="/native-american-artists/lee-sockyma">Lee Sockyma</a></li>
        <li><a href="/native-american-artists/quinston-taylor">Quinston Taylor</a></li>
        <li><a href="/native-american-artists/leander-tenakhongva">Leander Tenakhongva</a></li>
        <li><a href="/native-american-artists/robert-tenorio">Robert Tenorio</a></li>
        <li><a href="/native-american-artists/wilfred-tewawina-jr">Wilfred Tewawina Jr.</a></li>
        <li><a href="/native-american-artists/jonah-thompson">Jonah Thompson</a></li>
        <li><a href="/native-american-artists/carlton-timms">Carlton Timms</a></li>
        <li><a href="/native-american-artists/conrad-torivio">Conrad Torivio</a></li>
        <li><a href="/native-american-artists/fermin-torivio">Fermin Torivio</a></li>
        <li><a href="/native-american-artists/abeita-torres">Abeita Torres</a></li>
        <li><a href="/native-american-artists/jacob-n-warner">Jacob N. Warner</a></li>
        <li><a href="/native-american-artists/johnny-wester-iii">Johnny Wester III</a></li>
        <li><a href="/native-american-artists/alexander-youvella-sr">Alexander Youvella Sr.</a></li>
        <li><a href="/native-american-artists/darrell-youvella">Darrell Youvella</a></li>
        <li><a href="/native-american-artists/preston-youvella">Preston Youvella</a></li>
      </ul>
    </li>

    <li><a href="/gourd-art-by-robert-rivera">Native American Gourd Art</a></li>
    <li><a href="/native-american-showpieces">Native American Showpieces</a></li>
    <li><a href="/casas-grandes-paquime-renaissance-pottery-from-mata-ortiz">Casas Grandes/Paquime Renaissance Pottery from Mata Ortiz</a></li>
    <li><a href="/native-american-navajo-rugs">Native American Navajo Rugs</a></li>
    <li><a href="/navajo-art">Navajo Art</a></li>
    <li><a href="/native-american-painted-hides-and-paintings">Native American Painted Hides and Paintings</a></li>
    <li><a href="/jewelry-keepsake-boxes">Native American Jewelry Keepsake Boxes</a></li>
    <li><a href="/wild-north-american-animal-skulls">Wild North American Animal Skulls</a></li>
    <li><a href="/native-american-made-mini-packs-of-10">Native American Made Mini-Packs of 10</a></li>
    <li><a href="/sale-items">Sale Items</a></li>
    <li><a href="/native-american-christmas-items">Native American Christmas Items</a></li>
    <li><a href="/kachina-house-shirts">Kachina House Shirts</a></li>
    <li><a href="/books-for-sale">Books for Sale</a></li>
    <li><a href="/gift-certificates">Gift Certificates</a></li>
  </ul>
</div>

I expect that when I am hovering over an .item, .item:hover styling should be active..... right??

Answer 1

I think you might be overcomplicating your styles, specially with the pointer-events styles and whatnot. If all the elements in your menus and submenus are links/hoverable items, you should not be removing the pointer-events or their individual visibility, and instead make the parent container invisible.

Additionally, since you're styling with SCSS, you're nesting your .sub-menu inside a path that makes the .sub-menu quite a specific CSS rule. Your CSS reads like so:

.menu-wrapper .all-categories .toggle-nav > ul li a .submenu {
    left: calc(~'100% - 20px');
    top: 0;
    border: 1px solid #DDDDDD;
    padding: 20px 30px;
    color: #666666;
}

As a standard, you should avoid nesting down to 5 levels, for simplicity's sake.

In regards to your :hover problem, I don't see the .sub-menu hover styles, or the .see-all-categories element.

Try simplifying your example and post a snippet of your code replicating the problem so it's a little bit clearer to debug. Who knows, you might even find the issue yourself.

Answer 2

I ended up rewriting the menu CSS from scratch basically, and it is working now (even with using opacity: 0 and visibility: hidden instead of display: none ). I'm not 100% on what the issue was, but I am about 86.239% sure that it was related to the level-1 submenu having the columns property, and break-inside: avoid on its child menu items. The level-2 submenus were children of the level-1 menu items, so I'm guessing the break-inside was affecting those level-2 submenus as well, even though they were position absolute and appeared fine visually. I found a way to keep the same layout using flexbox instead of css columns, and it is working much better.