如何为给定的HTML导航栏添加子菜单？

Hey there! Adding a submenu to your navbar is straightforward—you just need to nest a child <ul> inside the parent list item and add some CSS to handle visibility. Let's walk through it step by step.

Step 1: Modify the HTML Structure #

First, update your existing navigation code to include a nested submenu inside the parent list item you want to expand. For example, let's add a submenu under the "uslugi" item:

<nav class="main_nav justify-self-end"> 
  <ul class="nav_items"> 
    <li class="active"><a href="index"><span>asd</span></a></li> 
    <!-- Parent item with submenu -->
    <li class="has-submenu">
      <a href="uslugi"><span>asd</span></a>
      <!-- Submenu -->
      <ul class="submenu">
        <li><a href="uslugi/sub1"><span>Submenu Item 1</span></a></li>
        <li><a href="uslugi/sub2"><span>Submenu Item 2</span></a></li>
        <li><a href="uslugi/sub3"><span>Submenu Item 3</span></a></li>
      </ul>
    </li> 
    <li><a href="proekti"><span>asdf</span></a></li> 
    <li><a href="zanas"><span>asd</span></a></li> 
    <li><a href="porachka"><span>asd</span></a></li>
  </ul>
</nav>

We added a has-submenu class to the parent list item to target it in CSS, and nested a new <ul class="submenu"> with the submenu items.

Step 2: Add CSS for Submenu Behavior #

Next, add CSS to hide the submenu by default and show it when hovering over the parent item. This ensures the submenu only appears when needed:

/* Ensure parent item is positioned relative for submenu placement */
.nav_items .has-submenu {
  position: relative;
}

/* Base styles for the submenu */
.nav_items .submenu {
  position: absolute;
  top: 100%; /* Places submenu directly below the parent item */
  left: 0;
  background-color: #fff; /* Match your navbar's background */
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Hide submenu by default */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: Add depth with a shadow */
  min-width: 150px; /* Ensure submenu has enough space */
}

/* Show submenu when hovering over the parent item */
.nav_items .has-submenu:hover .submenu {
  display: block;
}

/* Style submenu links */
.nav_items .submenu li a {
  padding: 10px 15px;
  display: block;
  white-space: nowrap; /* Prevent text wrapping */
  text-decoration: none;
  color: #333; /* Match your link color scheme */
}

/* Optional: Hover effect for submenu items */
.nav_items .submenu li a:hover {
  background-color: #f0f0f0;
}

Optional: Accessibility Improvements #

For better screen reader support, add aria attributes to the parent link to indicate it has a submenu:

<a href="uslugi" aria-haspopup="true" aria-expanded="false"><span>asd</span></a>

If you want to support keyboard navigation (like opening the submenu with the Enter key), you'd add a small JavaScript snippet to toggle the aria-expanded state and submenu visibility, but the CSS-only approach works for basic mouse interactions.

You can repeat this pattern for any other menu items that need submenus—just add the has-submenu class and nested <ul class="submenu"> to the parent list item.

Content of the question originates from Stack Exchange, asked by Helpme pls