CSS Dropdown下拉菜单无法触发显示，请问代码错误出在哪里？

问题根因 #

你写的.about_us1:hover .dropdown1是CSS后代选择器，只有当.dropdown1是.about_us1的嵌套子元素时，hover规则才会生效。你当前的HTML结构中，.dropdown1和.about_us1是同级元素，完全不满足选择器的匹配条件，所以三种状态切换方案都不会触发效果。

修复方案 #

1. 调整HTML结构 #

将下拉菜单.dropdown1嵌套到.about_us1对应的h3标签内部，同时删除多余的<center>标签（你已经给下拉菜单设置了绝对定位，居中标签不会生效还会干扰布局），并且给.about_us1加上position: relative，让下拉菜单的绝对定位是相对于ABOUT US按钮的，不会随页面缩放乱跑。

2. 调整CSS规则 #

除了opacity切换，建议补充visibility和transition属性，让显示动画更流畅，同时加z-index避免下拉菜单被其他导航元素遮挡，还要保证鼠标移到下拉菜单上时不会消失：

修复后CSS代码

.about_us1 {
  /* 让子元素的绝对定位相对于当前按钮 */
  position: relative;
  cursor: pointer;
}
.dropdown1{
  width: 200px;
  height: 110px;
  background-color: white;
  border: 5px solid black;
  position:absolute;
  /* 相对于父按钮定位，设置为0就刚好在按钮正下方 */
  left: 0;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s all ease;
  /* 避免被其他元素遮挡 */
  z-index: 999;
}
/* 现在后代选择器可以正常匹配到下拉菜单 */
.about_us1:hover .dropdown1{
  opacity: 1;
  visibility: visible;
}

修复后HTML核心片段

<div class="header">
  <strong> <h3 style="position: relative;top: 2px;left: 200px;font-weight: 1000;font-size: 30px;">HOME</h3></strong>
  <strong> 
    <h3 class="about_us1" style="position: relative;top: -30px;left: 400px;font-weight: 1000;font-size: 30px;">
      ABOUT US
      <!-- 下拉菜单放到按钮内部 -->
      <div class="dropdown1">
        <h3>Our Motto</h3>
        <br>
        <h3>Admission</h3>
        <br>
        <h3>Principal's Desk</h3>
      </div>
    </h3>
  </strong>
  <strong> <h3 style="position: relative;top: -65px;left: 700px;font-weight: 1000;font-size: 30px;">ACADEMIC</h3></strong>
  <strong> <h3 style="position: relative;top: -100px;left: 1000px;font-weight: 1000;font-size: 30px;">INFRASTRUCTURE</h3></strong>
  <strong> <h3 style="position: relative;top: -135px;left: 1450px;font-weight: 1000;font-size: 30px;">ADMISSION</h3></strong>
</div>

额外优化建议 #

你现在用top负值逐个偏移导航项的布局方式容错率很低，窗口缩放时很容易错位，建议给.header设置display: flex，加justify-content: space-around来做导航排列，不需要手动写定位偏移。

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