如何修改CSS/HTML为网站添加单个下拉菜单

一、修改HTML结构（所有页面通用，改完一个直接复制） #

基于你现有顶部导航的HTML，给需要下拉的菜单项套上容器结构：

假设你现有导航HTML是这样：

<div class="top-nav">
  <a href="/">Home</a>
  <a href="/services">Services</a>
  <a href="/about">About</a>
</div>

修改为带下拉的结构：

<div class="top-nav">
  <a href="/">Home</a>
  <!-- 下拉菜单项容器 -->
  <div class="dropdown">
    <a href="/services" class="dropdown-trigger">Services</a>
    <!-- 下拉内容 -->
    <div class="dropdown-menu">
      <a href="/services/web-dev">Web Development</a>
      <a href="/services/app-dev">App Development</a>
      <a href="/services/design">Design Services</a>
    </div>
  </div>
  <a href="/about">About</a>
</div>

二、补充外部CSS规则（无需inline样式） #

把以下代码加到你的外部CSS文件里，和现有.top-nav相关样式放在一起：

/* 下拉容器：相对定位，让子菜单基于它定位 */
.top-nav .dropdown {
  float: left;
  position: relative;
}

/* 下拉触发器：和普通导航链接保持一致样式 */
.top-nav .dropdown-trigger {
  display: block;
  /* 这里复用你现有.top-nav a的padding、color等样式，或者直接复制现有规则 */
  padding: 14px 16px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

/* 下拉菜单：默认隐藏，绝对定位在父容器下方 */
.top-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 999; /* 确保菜单在其他内容上方 */
}

/* 下拉菜单链接样式 */
.top-nav .dropdown-menu a {
  float: none; /* 取消浮动，垂直排列 */
  display: block;
  padding: 12px 16px;
  color: #333;
  text-align: left;
  text-decoration: none;
}

/* 鼠标悬停时显示下拉菜单 */
.top-nav .dropdown:hover .dropdown-menu {
  display: block;
}

/* 下拉触发器和菜单链接的hover效果，和现有导航hover保持一致 */
.top-nav .dropdown:hover .dropdown-trigger,
.top-nav .dropdown-menu a:hover {
  background-color: #ddd;
  color: #000;
}

三、兼容老旧网站的注意事项 #

• 如果你的现有.top-nav设置了overflow: hidden，会导致下拉菜单被截断，需要改成overflow: visible
• 若网站有全局a标签样式冲突，用.top-nav .dropdown-menu a这种更具体的选择器覆盖
• 老旧浏览器（如IE8）不支持box-shadow，可以直接删掉这个属性，不影响功能
• 所有页面的头部导航修改完成后，直接复制到其他HTML文件即可，CSS只需要修改一次

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