Question

在我正在工作的网站上，子菜单中有一个子菜单。二级子菜单比父级一级子菜单高。我使用CSS基本上是说，如果我将鼠标悬停在级别1子菜单或级别1子菜单本身的父列表项上，则级别1子菜单是可见的，并且我在重复同一件事用于二级子菜单。但是，当鼠标离开级别1子菜单的边界时，级别2项上的指针事件似乎不再被拾取。

我理解这确实让人感到困惑，但是您可以在这个草率而迅速抛出的分阶段站点上看到它的运行情况（我知道它不是处于最佳状态，请耐心等待样式出现）：http://kachinahouse.newbird.co/

将鼠标悬停在“所有类别”，“美国原住民文物”上，然后尝试从列表下方选择一个子菜单项。离开一级子菜单的边界后，整个菜单消失，就好像没有收到悬停事件一样。

在野生动物园中，似乎没有注册2级上的悬停事件。
在Chrome中，当鼠标离开第1级边界时，第2级悬停事件消失
在Firefox中，只要我将鼠标悬停在它们上方，一切都会按预期运行，并且子菜单保持打开状态。

应该注意的是，我没有使用display：none在子菜单项出现之前隐藏它们，而是结合使用了不透明度，可见性和指针事件：none，以便可以使用平滑的淡入淡出过渡。我之所以这样说，是因为我想知道我的指针事件是否可能以某种方式使事情变糟……？我不知道如何。

我的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;
}

我是不是在做一些愚蠢的事情，或者这是某种浏览器问题？

如果可能的话，我想避免使用Javascript，我只是觉得不需要像这样的东西...

我到处都检查过指针事件：无，溢出属性，z-index问题等...

这是实际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>

我希望当我将鼠标悬停在.item上时，.item：hover样式应该处于活动状态.....对吗？

Answer 1

我认为您可能会使样式过于复杂，尤其是main = spec_g <$> openBackend 16 >>= hspec样式等等。如果菜单和子菜单中的所有元素都是链接/可悬停的项目，则不应删除pointer-events或它们的可见性，而应使父容器不可见。

此外，由于您要使用SCSS进行样式设置，因此您将pointer-events嵌套在使.sub-menu成为特定CSS规则的路径中。您的CSS如下所示：

.sub-menu

作为标准，为简单起见，应避免嵌套到5个级别。

关于您的.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; }问题，我没有看到:hover悬停样式或.sub-menu元素。

尝试简化示例，并发布复制该问题的代码段，以便进行调试。谁知道，您甚至可能自己发现问题。

Answer 2

我最终基本上从头开始重写菜单CSS，并且现在可以正常工作（即使使用... .elseUse(ElementSelectors.byName) .build();和opacity: 0而不是visibility: hidden也可以）。我不是问题的100％，但我大约86.239％的人确定这与具有display: none属性和其子菜单项上的columns的1级子菜单有关。 2级子菜单是1级菜单项的子级，因此我猜break-inside: avoid也影响了这些2级子菜单，即使它们的位置是绝对的并且在视觉上看起来也不错。我找到了一种方法，使用flexbox而不是css列来保持相同的布局，并且效果更好。

子菜单内的子菜单上未捕获CSS悬停事件

2 个答案: