如何让下拉菜单悬浮覆盖下方元素？并实现hover背景时触发菜单显示

一、核心修改逻辑 #

1. 让下拉菜单覆盖下方元素 #

通过绝对定位让下拉菜单脱离正常文档流，不再占据空间挤压下方元素：

• 给包含下拉菜单的父级<li>添加position: relative，作为下拉菜单的定位参考容器
• 给下拉菜单<ul>设置position: absolute，并调整位置参数使其贴在父元素底部

2. 实现Ramblings背景色出现时显示下拉 #

鼠标悬停在Ramblings的<a>标签上时，父级<li>会同步触发hover状态，刚好和<a>的背景色触发时机一致，因此用li:hover ul就能实现需求。

二、修改后的完整代码 #

CSS部分 #

@font-face {
  font-family: "Chivo Mono";
  src: URL("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  font-family: 'Trebuchet MS';
  color: #777;
}

html,
body {
  margin: 0;
  padding: 0;
}

.emails {
  height: 100px;
  width: 250px;
}

.nav li {
  display: inline-block;
  padding: 0;
  position: relative; /* 添加：作为下拉菜单的定位参考 */
}

.header {
  background-color: #A7C7E7;
  background-size: cover;
  padding-bottom: 40px;
  margin-bottom: 20px
}

.nav a {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
}

.nav a:hover {
  background-color: rgba(255, 150, 190, 1);
}

.main-nav {
  text-align: center;
  font-size: 1.7em;
  border-bottom: 3px solid rgba(255, 150, 190, 1)
}

.main-nav li {
  padding: 0 5%;
}

.page-name {
  text-align: center;
  margin: 0;
  font-size: 4em;
  font-family: "Chivo Mono";
  font-weight: normal;
  color: rgba(255, 150, 150, 1);
}

.footer {
  background-color: #A7C7E7;
  margin: 50px 0px;
  padding: 50px 0px;
  border: white;
}

.footer h1 {
  padding: 0px 0px
}

.footer textarea {
  margin-top: 2em;
  width: 400px;
  height: 200px;
}

.body-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5em
}

.footer {
  text-align: center;
  margin-top: 10em;
  margin-bottom: 0em;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.email-button {
  padding: 1em;
}

.article-title h2 {
  text-align: center;
  color: Black;
}

.coming-soon {
  color: white;
}

.nav li {
  color: white;
}

.email-button button {
  background-color: rgba(255, 150, 190, 1);
  color: white;
  padding: 7px 20px;
  font-size: 1.3em;
  border-radius: 10px;
  border: 0px;
  transition-duration: 0.9s;
}

.button:hover {
  background-color: white;
  color: #A7C7E7;
}

/* 修改下拉菜单样式 */
nav ul li ul {
  position: absolute; /* 绝对定位脱离文档流 */
  top: 100%; /* 贴在父li底部 */
  left: 0;
  width: 100%; /* 和父li宽度一致 */
  padding: 0;
  display: none;
  background-color: rgba(255, 150, 190, 1);
  text-align: center;
  font-size: .6em;
}

nav ul li:hover ul {
  display: block;
}

HTML部分（无需修改） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="zuckymuckyboi" />
  <title>Home</title>
  <link rel="stylesheet" href="Resources\styles.css">
  <style>
    p {
      text-align: center;
    }
  </style>
</head>

<body>
  <header class="header">
    <nav class="nav main-nav">
      <ul>
        <li><strong><a href= "index.html">Home</a></strong></li>
        <li><strong><a>Ramblings</a></strong>
          <ul>
            <li><a href="gunlawramble.html">Gun Laws</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <div>
      <h1 class="page-name">About</h1>
    </div>
  </header>
  <section class="body-text">
    <div>
      <p text>To be writen...
        <p>
    </div>
  </section>
  <footer class="footer">
    <div>
      <h1>Have Suggestion/Questions?</h1>
    </div>
    <div>
      <textarea class="emails" placeholder="Write and email me here!"></textarea>
    </div>
    <div class="email-button">
      <button function="button" class="button">Send</button>
    </div>
  </footer>
</body>

三、效果说明 #

• 下拉菜单现在会直接覆盖在下方元素上方，不会再挤压页面内容
• 当鼠标悬停在Ramblings链接上，链接出现背景色的同时，下拉菜单会同步显示

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