下面给你一个用纯HTML和CSS实现的**蜂窝菜单（Hexagonal Menu）**示例代码，效果是多个六边形（蜂窝形）排列成网格，每个六边形是一个可点击的菜单项。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>蜂窝菜单示例</title>
<style>
  /* 重置默认样式 */
  * {
    box-sizing: border-box;
  }
  body {
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .hex-menu {
    display: flex;
    flex-wrap: wrap;
    width: 320px;
    margin: 0 auto;
  }

  .hex {
    position: relative;
    width: 100px; /* 六边形宽度 */
    height: 115px; /* 六边形高度 */
    margin: 0 5px 8.66px; /* 左右间距，底部间距约为 height * sin(60°) */
    background-color: #3498db;
    clip-path: polygon(
      25% 0%, 75% 0%, 
      100% 50%, 75% 100%, 
      25% 100%, 0% 50%
    );
    cursor: pointer;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s;
    user-select: none;
  }
  .hex:hover {
    background-color: #2980b9;
  }

  /* 第二行向右偏移（半个六边形宽度 + margin） */
  .hex-menu .hex:nth-child(odd) {
    margin-top: 15px;
  }

  /* 文字样式 */
  .hex span {
    pointer-events: none;
    font-weight: bold;
    padding: 10px;
  }

</style>
</head>
<body>

<div class="hex-menu">
  <div class="hex"><span>菜单一</span></div>
  <div class="hex"><span>菜单二</span></div>
  <div class="hex"><span>菜单三</span></div>
  <div class="hex"><span>菜单四</span></div>
  <div class="hex"><span>菜单五</span></div>
  <div class="hex"><span>菜单六</span></div>
  <div class="hex"><span>菜单七</span></div>
  <div class="hex"><span>菜单八</span></div>
  <div class="hex"><span>菜单九</span></div>
</div>

</body>
</html>

说明：

  • 六边形用 clip-path: polygon() 做裁剪，形成六边形形状。
  • 采用交错布局，奇数项和偶数项交错排列形成蜂窝形。
  • 你可以把 .hex 改成 <a> 标签，并加 href 实现可点击导航。
  • 可根据需要调整宽度和颜色，支持响应式改进。

如果你想要我帮你写带点击跳转的版本或者加点动效，也可以告诉我！