Web开发新手求助：W3-Layout模板添加子菜单导航栏失败

Hey there! Let's get that submenu working for your W3-Layout template. I've tinkered with these templates before, so here's a step-by-step solution tailored to your code:

1. Fix the HTML Structure #

Your current code doesn't include the nested submenu structure, and the <nav> placement inside <ul> is a bit off. Update it to this:

<div class="top-menu">
  <span class="menu"><img src="images/nav-icon.png" alt="Menu Toggle"/></span>
  <ul>
    <nav class="cl-effect-5">
      <!-- Parent menu item with submenu -->
      <li class="has-submenu">
        <a href="index.html" class="active"><span data-hover="Home">Home</span></a>
        <!-- Submenu nested inside parent li -->
        <ul class="submenu">
          <li><a href="subpage1.html"><span data-hover="Services">Services</span></a></li>
          <li><a href="subpage2.html"><span data-hover="Portfolio">Portfolio</span></a></li>
        </ul>
      </li>
      <!-- Add other menu items as needed -->
      <li><a href="about.html"><span data-hover="About">About</span></a></li>
      <li><a href="contact.html"><span data-hover="Contact">Contact</span></a></li>
    </nav>
  </ul>
</div>

2. Add Required CSS #

W3-Layout templates don't include submenu styles by default, so add this to your stylesheet to handle visibility and positioning:

/* Parent menu item needs relative positioning for submenu */
.has-submenu {
  position: relative;
  display: inline-block; /* Keep menu items horizontal on desktop */
}

/* Hide submenu by default */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff; /* Match your template's background color */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  min-width: 200px;
  z-index: 999; /* Ensure submenu stays above other content */
}

/* Style submenu items to match your template */
.submenu li {
  display: block;
  padding: 8px 15px;
  margin: 0;
}

/* Show submenu on hover (desktop) */
.has-submenu:hover .submenu {
  display: block;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
  .has-submenu {
    display: block; /* Stack menu items vertically on mobile */
  }
  .submenu {
    position: static;
    box-shadow: none;
    padding-left: 20px; /* Indent submenu for hierarchy */
  }
  /* Add this class via JS to toggle mobile submenu */
  .has-submenu.active .submenu {
    display: block;
  }
}

3. Add Mobile Toggle JavaScript (Optional but Recommended) #

For touch devices, hover won't work, so add this JS to let users tap parent items to expand submenus:

// Toggle main menu when clicking the nav icon
document.querySelector('.menu').addEventListener('click', function() {
  const mainMenu = document.querySelector('.top-menu ul');
  mainMenu.classList.toggle('active');
});

// Toggle submenus on mobile
document.querySelectorAll('.has-submenu').forEach(item => {
  item.addEventListener('click', function(e) {
    if (window.innerWidth <= 768) {
      e.preventDefault();
      this.classList.toggle('active');
    }
  });
});

Key Notes to Keep in Mind #

• Match your template's styles: Adjust colors, padding, and font sizes in the CSS to fit your existing W3-Layout theme.
• Check for template conflicts: If your template has a pre-existing nav.js or similar file, make sure the above JS doesn't clash with it.
• Test on both desktop and mobile: Ensure the submenu behaves as expected across device sizes.

内容的提问来源于stack exchange，提问作者core114