多级菜单移动端适配求助：桌面端正常，移动端布局混乱

Hey there! Let's get your multi-level menu working smoothly on small screens while keeping that hover-based submenu expansion you want. Since you're already familiar with media queries, we'll use that as our starting point to refactor the existing CSS.

Core Issues to Fix #

Your current desktop layout uses floats and absolute positioning for submenus, which breaks on small screens because:

• Floated list items stack horizontally and overflow the viewport
• Absolute-positioned submenus can easily go off-screen on narrow devices

Step-by-Step Refactor #

1. Clean Up Base CSS (Flexbox Upgrade)

First, let's swap floats for flexbox—it’s more responsive-friendly and simplifies alignment. We’ll also tweak positioning to better contain submenus:

.menu {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background: #073648;
  position: static;
}

.navigation {
  list-style: none;
  padding: 0;
  margin: 0 0 0 16px;
  background: rgb(58, 58, 58);
  font-size: 16px;
  /* Replace float with flex for easier layout control */
  display: flex;
  align-items: stretch;
}

.navigation li {
  position: relative; /* Ensure submenus stay anchored to parent items */
}

.navigation li:hover {
  background: #1a4655;
}

.navigation li:first-child {
  border-radius: 5px 0 0 5px;
}

.navigation li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.navigation ul {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  top: 100%; /* Align submenu to the bottom of its parent */
  left: 0;
}

.navigation ul ul {
  left: 100%;
  top: 0;
}

.navigation ul li {
  position: relative;
}

.navigation li:hover > ul {
  display: block;
  background: #1a4655;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  width: 250px;
}

.navigation li li a:hover {
  background: #0c323f;
  color: white;
}

.clear {
  clear: both;
}

2. Add Media Query for Small Screens

Now let’s target screens smaller than 768px (adjust the breakpoint to fit your design) and rewrite the layout to be vertical:

@media screen and (max-width: 768px) {
  .menu {
    height: auto; /* Let menu height adjust to content instead of fixed 40px */
  }

  .navigation {
    flex-direction: column; /* Stack menu items vertically */
    margin: 0; /* Remove left margin to fit full screen */
  }

  .navigation li {
    width: 100%; /* Make each menu item full-width */
  }

  .navigation li:first-child {
    border-radius: 0; /* Remove rounded corners on mobile */
  }

  /* Fix submenu positioning for mobile */
  .navigation ul {
    position: relative; /* Replace absolute positioning to keep submenus in flow */
    left: 0;
    top: 0;
    width: 100%; /* Full-width submenus */
    background: #225668; /* Slightly darker shade to distinguish hierarchy */
  }

  .navigation ul ul {
    left: 0;
    top: 0;
    margin-left: 20px; /* Indent nested submenus for clarity */
    width: calc(100% - 20px); /* Full width minus indent */
  }
}

Key Changes Explained #

• Flexbox Base: Makes switching between horizontal/vertical layouts seamless without float hacks
• Mobile Vertical Stack: Full-width menu items prevent overflow and are easier to tap on touch screens
• Relative Submenus: On mobile, submenus sit directly below their parent items instead of floating, keeping them within the viewport
• Indented Nested Submenus: Visual hierarchy helps users navigate deep menu levels on small screens

Next Steps to Expand #

• If you want a collapsible hamburger menu for mobile, you’d add a toggle button and a bit of JavaScript to show/hide the .navigation container
• Tweak colors, padding, and breakpoints to match your site’s branding

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