导航栏下拉菜单列宽匹配及Hover状态联动效果实现求助

Hey there! Let's get your mega menu working exactly how you want it. You're already close—let's tackle the two remaining issues step by step.

1. Ensuring Column Width Consistency #

You already have the right idea by setting both .header22 and .column to width: 33.33%. To make sure they're perfectly aligned, we just need to remove any default padding from the row containers and ensure all elements use box-sizing: border-box (which you already have with the universal selector). This keeps each top column exactly matching the width of its corresponding bottom column.

2. Syncing Hover States Between Column Pairs #

CSS alone can't target elements that aren't direct siblings or children in the DOM, so we'll use a bit of JavaScript to link the hover states of each top and bottom column pair. Here's how to implement it:

Updated CSS #

We'll create a reusable hover-active class for the hover styles, and add smooth transitions for a polished look:

* { box-sizing: border-box; }
body { margin: 0; }
.navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; }
.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; }
.navbar a:hover, .dropdown:hover .dropbtn { color: #fc7b03; background-color: #B5B5B5; }
.dropdown-content { display: none; position: absolute; background-color: #fc7b03; width: 100%; left: 0; box-shadow: 0px 3px 26px 0px #fc7b03; z-index: 1; opacity: 95%; }
.dropdown-content .header { background: red; padding: 16px; color: white; }
.dropdown:hover .dropdown-content { display: block; }

/* Column Styles */
.column { 
  float: left; 
  width: 33.33%; 
  padding: 10px; 
  background-color: #B5B5B5; 
  height: 250px; 
  opacity: 100%;
  transition: all 0.3s ease; /* Smooth hover transition */
}
.header22 { 
  float: left; 
  width: 33.33%; 
  padding: 1px; 
  background-color: #fc7b03; 
  height: 150px; 
  opacity: 100%; 
  font-size: 12px;
  text-decoration: none;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* Smooth hover transition */
}

/* Hover State Class (Toggled by JS) */
.header22.hover-active, .column.hover-active {
  background-color: #B5B5B5;
  border: solid white;
  border-width: 2px;
}

.column a { 
  float: none; 
  color: black; 
  padding: 16px; 
  text-decoration: none; 
  display: block; 
  text-align: left; 
}
.column a:hover { 
  background-color: #ddd; 
  color: #fc7b03; 
}

/* Clear Floats */
.row::after, .row2::after { 
  content: ""; 
  display: table; 
  clear: both; 
}
.row2, .row {
  padding: 0; /* Remove default padding to maintain alignment */
}

/* Responsive Layout */
@media screen and (max-width: 600px) { 
  .column, .header22 { 
    width: 100%; 
    height: auto; 
  } 
}

Updated HTML with JavaScript #

We'll add data-pair attributes to link each top column with its bottom counterpart, then add a script to sync the hover states:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <div class="row2">
        <a href="#" class="header22" data-pair="1">
          <img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50%">
          <br>
          <span style="display: block"> Hello world1 </span>
        </a>
        <a href="#" class="header22" data-pair="2">
          <span style="display: block"> Hello world2 </span>
        </a>
        <a href="#" class="header22" data-pair="3">
          <span style="display: block"> Hello world3 </span>
        </a>
      </div>
      <div class="row">
        <div class="column" data-pair="1">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column" data-pair="2">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column" data-pair="3">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Get all elements with data-pair attribute
const pairedElements = document.querySelectorAll('[data-pair]');

// Sync hover states between paired elements
pairedElements.forEach(element => {
  element.addEventListener('mouseenter', () => {
    const pairId = element.getAttribute('data-pair');
    const matchingElement = document.querySelector(`[data-pair="${pairId}"]:not(${element.tagName.toLowerCase()})`);
    
    element.classList.add('hover-active');
    if (matchingElement) matchingElement.classList.add('hover-active');
  });

  element.addEventListener('mouseleave', () => {
    const pairId = element.getAttribute('data-pair');
    const matchingElement = document.querySelector(`[data-pair="${pairId}"]:not(${element.tagName.toLowerCase()})`);
    
    element.classList.remove('hover-active');
    if (matchingElement) matchingElement.classList.remove('hover-active');
  });
});
</script>

How It Works #

• Data Pairing: The data-pair attribute links each top column (header22) to its corresponding bottom column (column).
• Hover Class: Instead of relying on CSS :hover, we use a hover-active class that's added/removed by JavaScript.
• Event Listeners: The script listens for mouse enter/leave events on each paired element, then toggles the hover-active class on both the element and its matching pair.

This will make your columns look connected, and hovering over either the top or bottom column will trigger the hover effect on both—just like the reference website!

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