如何为现有响应式导航菜单添加下拉链接？

嘿，我懂你现在的烦恼！给响应式导航加子菜单的时候，要么撑开整个导航栏，要么hover时出不来，确实是新手容易踩的小坑。不过用纯CSS就能轻松解决，我来帮你调整代码，一步步说清楚～

问题分析 #

你之前的代码里有两个关键问题：

1. 子菜单没有设置定位，所以它会占据正常文档流的空间，导致导航栏被撑开；
2. 你写的是nav ul li ul:hover{ display: block; }——但子菜单一开始是display:none的，根本hover不到它，自然不会显示。应该改成当父级li被hover时，显示子菜单。

第一步：修改HTML（添加子链接） #

直接在你要加子菜单的顶级菜单项的<ul>里新增<li>即可，比如给STRUCTURES再加一个子链接：

<nav>
  <a href="index.html"> 
    <div id="logo"><img src="images/logo-text.png" alt="CBS Stuctures, Inc."></div> 
  </a> 
  <label for="drop" class="toggle">MENU</label> 
  <input type="checkbox" id="drop" /> 
  <ul class="menu"> 
    <li><a href="index.html">HOME</a></li> 
    <li><a href="completed.html">COMPLETED PROJECTS</a></li> 
    <li><a href="structures.html">STRUCTURES</a> 
      <ul> 
        <li><a href="video-presentation.html">Video Presentation</a></li>
        <!-- 新增的子链接 -->
        <li><a href="another-subpage.html">Another Subitem</a></li>
      </ul> 
    </li> 
    <li><a href="new-products.html">NEW PRODUCTS</a></li> 
    <li><a href="contact.php">CONTACT</a></li> 
  </ul> 
</nav>

👉 放置位置：直接替换你原来的HTML代码，或者在STRUCTURES的<ul>里插入新增的<li>标签。

第二步：修改CSS（核心调整） #

替换你原来的CSS中关于子菜单的部分，我会标注关键修改点：

nav { height: auto; margin: 0; padding: 0; background-color: #000; }
#logo { display: block; float: left; padding: 0; }
nav:after { content: ""; display: table; clear: both; }
nav ul { display: inline-block; font-size: 1.5em; list-style: none; float: right; }
nav ul li { 
  display: inline-block; 
  float: left; 
  position: relative; /* 新增：给父li设置相对定位，让子菜单可以绝对定位 */
}
nav a { display: block; padding: 10px 20px; color: #fff; text-decoration: none; }
.toggle, [id=drop] { display: none; }
nav a:hover { color: #70E4FC; }

/* 修改子菜单样式 */
nav ul li ul{ 
  display: none; 
  position: absolute; /* 绝对定位，脱离文档流，不会撑开导航栏 */
  top: 100%; /* 子菜单顶部对齐父li底部 */
  left: 0; 
  background-color: #000; /* 和导航栏背景一致 */
  padding: 0;
  min-width: 200px; /* 给子菜单设置最小宽度，避免内容挤在一起 */
}

/* 修改hover触发逻辑：父li hover时显示子菜单 */
nav ul li:hover ul { display: block; }

/* 子菜单的li样式优化 */
nav ul li ul li {
  float: none; /* 子菜单li垂直排列 */
  display: block;
}

/* 移动端响应式调整 */
@media (max-width: 1024px) {
#logo { display: block; width: 100%; text-align: center; float: none; padding: 0; }
nav ul{ width: 100%; padding:0; margin:0; float: none; background-color: rgba(16,70,56,1.00); }
nav ul li { 
  width: 100%; 
  box-sizing: border-box; 
  padding: 10px; 
  background-color:rgba(11,51,41,1.00);
  position: relative; /* 移动端也要给父li加相对定位 */
}
nav ul li:hover{ background-color:#0F4739; }
.toggle + a, .menu{ display: none; }
.toggle{ display:block; background-color: #333333; padding: 14px; font-size: 1.5em; cursor: pointer; }
.toggle:hover { background-color:#515151; }
[id^=drop]:checked + ul{ display: block; }

/* 移动端子菜单样式调整 */
nav ul li ul {
  position: relative; /* 移动端子菜单用相对定位，避免错位 */
  background-color: rgba(11,51,41,0.8); /* 稍微区分一下父菜单 */
  margin-left: 20px; /* 缩进显示，更清晰 */
}
}

👉 放置位置：直接替换你原来的CSS代码，或者把修改的部分覆盖原CSS中对应的段落（注意CSS优先级，相同选择器后面的会覆盖前面的）。

关键修改说明 #

1. 父li加position: relative：这是让子菜单能相对于父li定位的基础；
2. 子菜单用position: absolute：脱离文档流，不会影响其他导航项的布局，也就不会撑开导航栏；
3. hover触发对象改为父li：nav ul li:hover ul——当鼠标悬停在顶级菜单项上时，自动显示下方的子菜单；
4. 移动端子菜单适配：调整为相对定位+缩进，在折叠菜单里更易区分层级。

这样修改后，你新增的子链接就会在鼠标悬停STRUCTURES时正常显示，而且不会撑开导航栏，移动端也能正常适配～

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