如何为CSS Grid布局页面的网格项添加下拉菜单（非仅导航栏）

我用CSS Grid构建网页，搜索教程后只找到导航栏下拉菜单的实现方法。现在想为页面中的网格项添加下拉菜单——比如当hover或点击.transact锚点标签时，显示包含「Customer」「Worker」「Contract worker」选项的下拉菜单。我是CSS新手，恳请帮助。以下是我的代码：

原CSS代码 #

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  font-weight: normal;
}

:root {
  --blue: lightgrey;
  --white: black;
  --border: #edc967;
  --holder: #ccb8b8;
  --active: #b2a3a3;
}

::selection {
  background-color: var(--border);
  color: var(--white);
}

body {
  color: var(--white);
  line-height: 1.6;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--white);
}

h1,
h2 {
  margin: 10px 0;
  line-height: 1.2;
}

p {
  margin: 10px 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--blue);
  grid-column: 1/7;
  padding: 17px;
  justify-items: center;
  align-items: center;
  font-size: 20px;
  border-bottom: 5px solid var(--border);
}

.header h1 {
  grid-column: 1/3;
  grid-row: 1/2;
}

/* Dashobaord Css */

.box {
  background-color: var(--blue);
  width: 80%;
  justify-items: center;
  align-items: center;
  display: grid;
  border-radius: 13px;
  border: 2px dashed var(--border);
  height: 70%;
  justify-self: center;
  align-self: end;
  font-size: 23px;
  color: var(--white);
}

.box:hover {
  text-decoration: underline;
  border: 3px solid var(--border);
}

.box:active {
  background-color: var(--active);
}

.title {
  grid-column: 1/7;
  width: 455.75px;
}

/* Dashobaord Css End */

原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">
    <link rel="stylesheet" href="ht.css">
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <h1>Company</h1>
      </div>
      <a class="box inv" href="#">
        <div>Inventory</div>
      </a>
      <a class="box transact" href="#">
        <div>Issue / Receive</div>
      </a>
      <a class="box ledger" href="#">
        <div>Ledgers</div>
      </a>
      <a class="box customer" href="#">
        <div>Customers</div>
      </a>
      <a class="box treasury" href="#">
        <div>Expenses</div>
      </a>
      <a class="box treasury" href="#">
        <div>Expense Transaction</div>
      </a>
      <a class="box treasury" href="#">
        <div>Profit</div>
      </a>
    </div>
  </body>
</html>

给Grid网格项加下拉菜单的核心是把下拉菜单作为目标网格项的子元素，通过CSS的:hover控制显示隐藏，同时用定位避免破坏原有Grid布局。

1. 修改HTML结构 #

把.transact的<a>标签改成容器（保留.box类），内部包含原按钮文本链接和下拉菜单列表，避免a标签嵌套的语义问题：

<div class="box transact">
  <a href="#">Issue / Receive</a>
  <ul class="dropdown">
    <li><a href="#">Customer</a></li>
    <li><a href="#">Worker</a></li>
    <li><a href="#">Contract worker</a></li>
  </ul>
</div>

其他网格项如果不需要下拉，也建议改成这种容器+内部链接的结构，保持语义统一。

2. 添加下拉菜单CSS样式 #

在原CSS末尾添加以下代码：

/* 下拉菜单核心样式 */
.box {
  position: relative; /* 让下拉菜单以当前.box为定位基准 */
}

.dropdown {
  position: absolute;
  top: 100%; /* 菜单紧贴.box下方显示 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中对齐.box */
  background-color: var(--blue);
  border: 2px solid var(--border);
  border-top: none; /* 去掉顶部边框，和.box衔接更自然 */
  border-radius: 0 0 13px 13px;
  width: 80%;
  padding: 10px 0;
  display: none; /* 默认隐藏菜单 */
  z-index: 100; /* 确保菜单在其他网格项上方 */
}

.dropdown li {
  padding: 8px 15px;
  text-align: center;
}

.dropdown li:hover {
  background-color: var(--active); /* 菜单选项hover高亮 */
}

/* hover时显示下拉菜单 */
.transact:hover .dropdown {
  display: block;
}

/* 适配新结构的按钮样式 */
.box > a {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  border-radius: 13px; /* 保留原按钮圆角 */
}

.box:hover > a {
  text-decoration: underline;
}

.box:active > a {
  background-color: var(--active);
}

关键说明 #

• position: relative给.box设置定位上下文，让下拉菜单的绝对定位不会脱离网格项
• 用transform: translateX(-50%)实现菜单水平居中，避免手动计算宽度
• 隐藏默认菜单，通过:hover触发显示，符合新手易理解的逻辑
• 调整了按钮样式的选择器，适配新的容器结构，保留原有交互效果

内容的提问来源于stack exchange，提问作者pip install logic