基于Codepen现有HTML/CSS圆形菜单，如何添加二级菜单？

我来帮你梳理下需要修改的核心部分，结合你现有的HTML/CSS圆形菜单代码，主要从HTML结构调整、CSS样式扩展两个方面入手：

一、修改HTML结构：给一级菜单项添加二级菜单容器 #

首先，你需要把原来的单个图片链接，包裹成一个包含一级菜单和二级菜单的容器，这样才能让二级菜单和对应的一级项关联起来：

原来的单层级结构：

<a href="#"><img src="your-image-url" alt="菜单图标"></a>

改成带二级菜单的结构：

<div class="menu-item" style="--i: 0"> <!-- --i 是你原来用来控制圆形排列角度的变量 -->
  <a href="#" class="primary-menu-link">
    <img src="your-image-url" alt="一级菜单图标">
  </a>
  <!-- 新增二级菜单列表 -->
  <ul class="submenu">
    <li><a href="#">二级菜单项1</a></li>
    <li><a href="#">二级菜单项2</a></li>
    <li><a href="#">二级菜单项3</a></li>
  </ul>
</div>

注意：给每个.menu-item保留你原来用来控制旋转角度的--i变量（0到4，对应5个一级项），确保一级菜单的圆形排列不受影响。

二、扩展CSS样式：实现二级菜单的显示/隐藏与布局 #

根据你想要的二级菜单样式（列表式或圆形子菜单），对应修改CSS：

1. 基础设置：让一级容器成为二级菜单的定位父级 #

首先给.menu-item添加相对定位，这样二级菜单可以基于它来定位：

.menu-item {
  position: relative; /* 新增：作为二级菜单的定位参考 */
  /* 保留你原来的绝对定位、旋转、位移样式，比如：
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  transform: rotate(calc(72deg * var(--i))) translate(150px) rotate(calc(-72deg * var(--i)));
  */
}

2. 列表式二级菜单（最常用） #

如果想要hover一级菜单时弹出列表式二级菜单，添加以下CSS：

/* 二级菜单基础样式：初始隐藏 */
.submenu {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 100%; /* 放在一级菜单下方 */
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* 初始偏移，配合动画 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 平滑过渡动画 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10; /* 确保二级菜单在最上层 */
}

/* 二级菜单项样式 */
.submenu li {
  padding: 8px 16px;
  white-space: nowrap; /* 防止文字换行 */
}

.submenu li a {
  color: #333;
  text-decoration: none;
  display: block;
}

.submenu li:hover {
  background: #f5f5f5; /* hover高亮 */
}

/* hover一级菜单时显示二级菜单 */
.menu-item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

3. 圆形二级菜单（和一级菜单风格统一） #

如果想要二级菜单也是圆形排列，调整CSS如下：

.submenu {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
}

/* 二级菜单项按圆形排列 */
.submenu li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  /* 用--sub-i变量控制每个二级项的旋转角度，比如4个二级项就是90deg间隔 */
  transform: rotate(calc(90deg * var(--sub-i))) translate(100px) rotate(calc(-90deg * var(--sub-i)));
}

.submenu li a {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* hover显示二级菜单 */
.menu-item:hover .submenu {
  opacity: 1;
  visibility: visible;
}

对应的HTML二级菜单项要加--sub-i变量：

<ul class="submenu">
  <li style="--sub-i: 0"><a href="#">子项1</a></li>
  <li style="--sub-i: 1"><a href="#">子项2</a></li>
  <li style="--sub-i: 2"><a href="#">子项3</a></li>
  <li style="--sub-i: 3"><a href="#">子项4</a></li>
</ul>

三、额外注意事项 #

• 如果你原来的菜单用了z-index，确保二级菜单的z-index值比一级菜单高，避免被遮挡；
• 如果需要点击触发（而不是hover），可以用CSS的:focus-within伪类，或者结合少量JS实现；
• 调整二级菜单的位置时，要根据一级菜单的大小和圆形半径来微调，确保布局美观。

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