javascript - 基于flexbox的导航子菜单在悬停时不显示子菜单项

Question

我的 css 导航中有一个错误，它使用 flexbox 在我的页面中分发列表。我有一个汉堡，点击时从右上角扩展菜单，列表项分布在页面中心下方。这里没有问题，但我无法让我的 sub ul 和 li 在悬停时变得可见。

我有以下代码：

    .burgerLine {
        width: 50px;
        height: 5px;
        margin: 5px;
        border-radius: 3px;
        background: var(--Navbar_Text);
      }

      .burgerPosition {
        position: absolute;
        top: 2vh;
        right: 2vh;
      }

      .burger {
        cursor: pointer;
        z-index: 10;
      }

      nav ul {
        position: fixed;
        height: 100vh;
        width: 100vw;
        padding: 0;
        background: linear-gradient(to bottom left, var(--Navbar_Grad_1), var(--Navbar_Grad_2));
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        clip-path: circle(1px at 100% 0%);
        -webkit-clip-path: circle(1px at 100% 0%);
        transition: all 0.45s ease-in-out;
        z-index: 9;
      }

      .revealNav {
        clip-path: circle(140vh at 100% 0%);
        -webkit-clip-path: circle(140vh at 100% 0%);
        pointer-events: all;
      }

      nav li {
        background: darkorange;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        padding: 1rem;
        position: relative;
        text-decoration: none;
      }

      nav li a {
        color: white;
      }

      nav li:hover {
        background: red;
        cursor: pointer;
      }

      nav ul li ul {
        background: green;
        visibility: hidden;
        opacity: 0;
        min-width: 5rem;
        position: absolute;
        transition: all 0.5s ease;
        margin-top: 1rem;
        left: 0;
        display: none;
      }

      nav ul li:hover > ul,
      nav ul li ul:hover {
        visibility: visible;
        opacity: 1;
        display: block;
      }

      nav ul li ul li {
        clear: both;
        width: 100%;
      }

  nav ul li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }

  nav ul li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }

  nav ul li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }

  nav ul li.fade {
    opacity: 1;
  }

  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
      transform: translateY(50px);
    }

    to {
      opacity: 1;
      transform: translateX(0px);
      transform: translateY(0px);
    }
  }
}

我的 html 看起来像：

<nav class="nav">
            <div class="navbarLogo">
                <a href="home.html" id="topOfPage"> <p class="logoTitle">Al Topping</p> <p class="logoSubTitle">Photography</p> </a>
            </div>
            <div class="burger burgerPosition">
                <div class="line burgerLine"></div>
                <div class="line burgerLine"></div>
                <div class="line burgerLine"></div>
            </div>
            <ul class="nav-links">
                <li class="nav-link">
                    <a href="about.html" class="nav-link-item">About</a>
                </li>
                <li class="nav-link">
                    <a href="photography_services.html" class="nav-link-item">Services <i class="fas fa-arrow-down"></i> </a>
                    <ul class="nav-sublinks">
                        <li class="nav-sublink">
                            <a href="wedding_photography.html" class="nav-sublink-item">Weddings</a>
                        </li>
                        <li class="nav-sublink">
                            <a href="portrait_photography.html" class="nav-sublink-item">Portraits</a>
                        </li>
                        <li class="nav-sublink">
                            <a href="adventure_photography.html" class="nav-sublink-item">Adventures</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-link">
                    <a href="photography_blog.html" class="nav-link-item">Blog</a>
                </li>
                <li class="nav-link">
                    <a href="https://photos.altopping.com" class="nav-link-item">Client Area</a>
                </li>
                <li class="nav-link">
                    <a href="contact_the_photographer.html" class="nav-link-item">Contact</a>
                </li>
            </ul>
        </nav>

js：

const nav = () => {
  // Activate the event listener for opening the navbar, when
  // clicked, open the nav and then manage the transition
  // effects for the nav links
  const burger = document.querySelector(".burger");
  assignEventListener(burger);

  // Activate event listener for closing the navbar
  // when clicking on a link
  const links = document.querySelectorAll(".nav-link");
  links.forEach((link, index) => {
    assignEventListener(link);
    link.style.animation = "";
  });

  animateNavbarLinks();
};

function assignEventListener(element) {
  // Activate event listener for argument event
  element.addEventListener("click", () => {
    toggleNavbarVisibility();
  });
}

function toggleNavbarVisibility() {
  // Toggle navbar
  const navlinks = document.querySelector(".nav-links");
  navlinks.classList.toggle("revealNav");
}

function animateNavbarLinks() {
  const links = document.querySelectorAll(".nav-link");

  // Animate Links
  links.forEach((link, index) => {
    if (link.style.animation) {
      link.style.animation = "";
    } else {
      link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
    }
  });
}

第一级 ul 和 li 出现，但没有子菜单项。我已经尝试更改它们的不透明度、可见性和颜色设置，以及它们的 z-index，以防万一它们被按下汉堡时覆盖我页面的主 ul 隐藏......什么都没有。我希望在悬停时会出现一些东西，但什么也没有。

任何人都可以看到任何明显的东西吗？

谢谢

ps 我知道我的 js 对顶级 li 的动画有问题，但还没有诊断出原因。如果有人发现为什么我会很感激。

标签： javascriptcsscss-animationssubmenu