请求修改twoguysplayingzelda.com桌面端垂直子菜单为水平样式

Hey there! Let's transform that vertical submenu into a full-width horizontal "second navbar" when hovering over the 'GAMES' item. Here's the adjusted CSS with key changes explained:

Modified CSS Code #

Main Menu Base Styles (Minor Tweaks) #

div.navigation.section.no-padding.bg-dark { background: #616161; } 
.main-menu { 
  font-family: 'Arial', sans-serif; 
  font-size: 1.0em; 
  text-align: center; 
  position: relative; /* Add this to contain the submenu */
} 
.main-menu li { position: relative; } 
.main-menu > li { float: left; } 
.main-menu > li:before { content: none; } /* Simplify redundant rule */
.main-menu > li > a { 
  display: block; 
  padding: 12px; 
  font-size: 1.0em; 
  color: #FFFFFF; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  font-weight: 400; 
} 
.main-menu > .has-children > a, 
.main-menu > .page_item_has_children > a { 
  padding-right: 24px; /* Add space for dropdown indicator */
  position: relative; 
} 
.main-menu > .has-children > a::after, 
.main-menu > .page_item_has_children > a::after { 
  content: ""; 
  display: block; /* Show dropdown arrow by default */
  border: 5px solid transparent; 
  border-top-color: #999; 
  position: absolute; 
  z-index: 1001; 
  right: 12px; 
  top: 50%; 
  margin-top: -2px; 
} 
.main-menu li:hover > a { 
  cursor: pointer; 
  background: #01B3D9; 
  color: #FFFFFF; 
} 
.main-menu > .has-children:hover > a::after { 
  border-top-color: #fff; 
}

Horizontal Submenu Styles (Major Changes) #

/* Sub menus - now horizontal */
.main-menu li ul { 
  position: absolute; 
  z-index: 10000; 
  display: flex; /* Use flexbox for clean horizontal alignment */
  left: 0; /* Align to the left edge of the main menu */
  top: 100%; /* Position directly below the main menu */
  width: 100%; /* Span full width of the main menu container */
  opacity: 0; 
  visibility: hidden; /* Pair with opacity for smooth transitions */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
  background: #616161; 
  padding: 0; 
} 
.is_mobile .main-menu li ul { 
  opacity: 1; 
  visibility: visible; 
  display: none; /* Preserve existing mobile menu behavior */
} 
.main-menu > li > ul { 
  padding-top: 0; /* Remove extra top padding */
} 
.main-menu ul li { 
  float: left; /* Fallback for older browsers */
  display: block; 
  border-top: none; /* Remove vertical border */
  border-left: 1px solid rgba(255,255,255,0.075); /* Add horizontal separator */
} 
.main-menu ul li:first-child { 
  border-left: none; /* No separator on first item */
} 
/* Hide sidebar arrow for horizontal submenu items */
.main-menu ul > .has-children::after, 
.main-menu ul > .page_item_has_children::after { 
  display: none; 
} 
.main-menu ul li { 
  width: auto; /* Let items size to their content */
  background: transparent; /* Inherit parent background */
} 
.main-menu ul a { 
  width: auto; 
  font-size: 1.0em; 
  background: transparent; 
  text-align: center; /* Center text horizontally */
  font-weight: 400; 
  padding: 12px 18px; /* Match main menu padding for consistency */
  line-height: 130%; 
  color: #FFFFFF; 
} 
.main-menu ul a:hover { 
  background: #01B3D9; 
  color: #FFFFFF; 
} 
/* Show submenu on hover */
.main-menu li:hover > ul { 
  opacity: 1; 
  visibility: visible; 
  left: 0; 
  top: 100%; 
  margin-left: 0; 
} 
.is_mobile .main-menu li:hover ul { 
  display: block; 
}

/* Deep down submenus (keep vertical for nested items) */
.main-menu ul li ul { 
  flex-direction: column; /* Revert to vertical layout for nested menus */
  width: 240px; /* Fixed width for vertical nested menus */
  top: 0; 
  left: 100%; /* Position to the right of parent item */
} 
.main-menu ul li:hover > ul { 
  top: 0; 
  left: 100%; 
  margin-left: 0; 
} 
.main-menu ul ul li { 
  background: #3d3d3d; 
  border-left: none; 
  border-top: 1px solid rgba(255,255,255,0.075); 
} 
.main-menu ul ul ul li { background: #4d4d4d; } 
.main-menu ul ul ul ul li { background: #4d4d4d; }

Key Changes Explained #

• Flexbox Layout: Added display: flex to .main-menu li ul to make submenu items align horizontally seamlessly.
• Full-Width Positioning: Set width: 100% and left: 0 so the submenu spans the entire main menu width, acting like a secondary navbar.
• Smooth Transitions: Replaced left: -9999px with visibility: hidden (paired with opacity) to avoid sudden position jumps during hover.
• Consistent Styling: Removed fixed item widths, swapped vertical borders for horizontal separators, and matched padding to the main menu for a unified look.
• Mobile-Friendly: Kept existing mobile menu behavior intact so the layout doesn't break on smaller screens.
• Nested Submenu Fix: Ensured deeper nested submenus still display vertically to prevent layout clutter.

This will make the 'GAMES' submenu expand horizontally below the main menu when hovered, exactly like a secondary navigation bar.

内容的提问来源于stack exchange，提问作者Two Guys Playing Zelda