如何在不使用JS的情况下为现有HTML导航栏添加下拉菜单？

基于你提供的HTML结构，我们可以通过CSS结合复选框状态或:hover伪类实现无需JavaScript的下拉菜单，以下是具体实现方案：

优化后的HTML结构 #

<ul class="nav">
  <li><a href="index.html" class="active">Home</a></li>
  <li><a href="">About Us</a></li>
  <li class="dropdown">
    <input type="checkbox" id="dropdownToggle1" class="dropdown-toggle">
    <label for="dropdownToggle1">Investments</label>
    <div class="dropdown-content">
      <a href="stock investment.html">Stock investment</a>
      <a href="#">Real Estate</a>
    </div>
  </li>
  <li><a href="">Apply</a></li>
  <li><a href="property-details.html">Property Details</a></li>
  <li><a href="contact.html">Contact Us</a></li>
  <li><a href="#"><i class="fa fa-calendar"></i> Schedule a visit</a></li>
</ul>

核心CSS代码 #

/* 隐藏复选框，仅用于触发状态切换 */
.dropdown-toggle {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 下拉容器设为相对定位，为下拉内容提供定位基准 */
.dropdown {
  position: relative;
}

/* 默认隐藏下拉内容 */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  min-width: 160px;
  z-index: 1;
  display: none;
}

/* 复选框被选中时，显示下拉内容 */
.dropdown-toggle:checked ~ .dropdown-content {
  display: block;
}

/* 让label样式与其他导航项统一 */
.dropdown label {
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 下拉链接基础样式 */
.dropdown-content a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

/* 导航基础样式与交互状态 */
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  position: relative;
}

.nav a, .nav label {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

.nav a.active, .nav label:hover, .dropdown-content a:hover {
  background-color: #111;
  color: white;
}

方案说明 #

1. 复选框触发方案：用隐藏的复选框作为状态开关，通过label绑定触发，结合CSS兄弟选择器~，在复选框被:checked时显示下拉内容，支持点击切换（更适配移动端触摸交互）
2. 可选hover方案：如果偏好鼠标悬停显示下拉，可替换复选框相关CSS为以下代码，无需修改HTML：

.dropdown:hover .dropdown-content {
  display: block;
}

3. 所有样式均保证与原有导航视觉统一，无需额外JavaScript即可完成下拉交互。

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