如何用CSS和HTML将表格导航栏的CORPORATE GOVERNANCE改为悬停下拉菜单

Got it, let's fix that dropdown menu for your table-based navigation bar and make it match the existing style perfectly. Here's a step-by-step solution tailored to your code:

Step 1: Update the HTML Navigation Structure #

First, locate the "CORPORATE GOVERNANCE" cell in your navigation table (I fixed the typo "COVERNANCE" to "GOVERNANCE" for you) and replace it with this structure that includes the dropdown menu:

<th scope="col" class="dropdown-container">
  <div align="center" class="masterselectedlink">
    <a href="corporategovernance.htm">CORPORATE GOVERNANCE</a>
    <!-- Customize these submenu items with your actual links/text -->
    <ul class="dropdown-menu">
      <li><a href="board-of-directors.htm">Board of Directors</a></li>
      <li><a href="audit-committee.htm">Audit Committee</a></li>
      <li><a href="corporate-policies.htm">Corporate Policies</a></li>
    </ul>
  </div>
</th>

Step 2: Add Matching CSS Styles to style.css #

Open your style.css file in cPanel and add these styles. They’ll handle hiding/showing the dropdown, aligning it perfectly, and making it blend with your existing navigation:

/* Set the dropdown container as a positioning anchor */
.dropdown-container {
  position: relative;
}

/* Hide dropdown menu by default */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Stick directly below the navigation cell */
  left: 0;
  background-color: #FFFFFF; /* Match your page's white background */
  border: 1px solid #ddd; /* Optional: subtle border to separate from content */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; /* Match the width of the parent navigation cell */
  z-index: 999; /* Ensure dropdown stays above other page content */
}

/* Show dropdown when hovering over the container */
.dropdown-container:hover .dropdown-menu {
  display: block;
}

/* Style submenu links to match your existing navigation */
.dropdown-menu li a {
  display: block;
  padding: 10px; /* Match the navigation table's cellpadding=10 */
  text-align: center;
  color: #000; /* Replace with your masterlink text color */
  text-decoration: none;
  font-family: inherit; /* Inherit font from your navigation */
  font-size: inherit; /* Match existing font size */
}

/* Hover effect for submenu items (match your selected link style) */
.dropdown-menu li a:hover {
  background-color: #your-selected-color; /* Replace with masterselectedlink's background */
  color: #your-selected-text-color; /* Replace with masterselectedlink's text color */
}

Step 3: Fine-Tune to Match Your Exact Style #

Check your existing style.css for the masterlink and masterselectedlink classes. Copy their color, font-family, and background-color values into the dropdown CSS above to ensure perfect visual consistency.

Quick Notes #

• No extra JavaScript is needed here—this uses pure CSS hover logic that works in all modern browsers.
• The dropdown will align perfectly with the original navigation cell because we set its width to 100% of the parent container.
• Save both your HTML and CSS files in cPanel, then refresh your page to test the dropdown.

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