嘿，我碰到过一模一样的问题！你这个height:100%不生效的原因很典型——CSS里的百分比高度是需要父元素有明确的高度值才能生效的，你的#menu没有设置height，所以li的100%高度根本找不到参照标准，自然就自适应不了啦。

给你两种解决方案，按需选择：

方案1：给父容器设置明确高度 #

如果你的菜单高度是固定的，直接给#menu加个height值就行，这样li的height:100%就会基于这个值计算：

#menu {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid black;
  height: 50px; /* 给父元素设置明确高度，可根据需求调整 */
}

li.hMenu {
  background: red;
  width: 33.33%;
  width: calc(100% / 3);
  height: 100%; /* 现在这个100%就有参照啦 */
  float: left;
}

li.hMenu:hover{ background-color: darkred; }
li.hMenu:active{ position: relative; left: 1px; top: 1px; background-color: darkred; }

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

方案2：改用Flexbox布局（更推荐） #

如果想要菜单高度自适应内容（比如a标签的padding变化时自动调整），用Flexbox是现在最优雅的方式，不用float，也不用纠结百分比高度的问题：

#menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid black;
  display: flex; /* 启用Flex布局 */
}

li.hMenu {
  background: red;
  flex: 1; /* 让每个li自动平分父容器宽度，替代calc和float */
  display: flex; /* 让a标签在li内垂直居中（可选） */
  align-items: center; /* 垂直居中内容 */
}

li.hMenu:hover{ background-color: darkred; }
li.hMenu:active{ position: relative; left: 1px; top: 1px; background-color: darkred; }

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  width: 100%; /* 让a标签占满li的宽度，扩大点击区域 */
}

这个方案的好处是：

• li会自动填充父容器的高度，完全自适应内容
• 用flex:1实现宽度平分，比calc更简洁，兼容性也更好
• 不用处理float带来的清除浮动问题，代码更干净

内容的提问来源于stack exchange，提问作者Michał Turczyn