如何用CSS实现导航栏Dropdown按钮占满栏高且符合HTML规范？

完全可以通过CSS实现，同时保持符合规范的HTML结构，核心思路是让下拉按钮的容器（<li>）拉伸至导航栏全高，再让按钮本身占满容器的高度，具体步骤如下：

1. 合规的HTML结构 #

保持<li>包裹在<ul>内，下拉按钮放在<li>中，示例结构：

<nav class="navbar">
  <ul class="nav-menu">
    <!-- 普通链接 -->
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <!-- 下拉按钮 -->
    <li class="nav-item dropdown">
      <button class="dropdown-btn">更多选项</button>
      <ul class="dropdown-menu">
        <li><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
      </ul>
    </li>
  </ul>
</nav>

2. CSS实现全高点击区域 #

通过以下样式让下拉按钮的点击区域覆盖导航栏上下高度：

/* 导航栏基础样式 */
.navbar {
  height: 60px; /* 自定义导航栏高度 */
  background-color: #f5f5f5;
}

/* 导航菜单容器 */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%; /* 继承导航栏高度 */
  align-items: stretch; /* 让每个li拉伸至菜单容器的高度 */
}

/* 导航项容器 */
.nav-item {
  position: relative; /* 用于下拉菜单定位 */
  /* 若需要固定宽度可添加：width: 120px; */
}

/* 普通链接样式（保持你已实现的全高效果） */
.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 16px;
  text-decoration: none;
  color: #333;
}

/* 下拉按钮核心样式 */
.dropdown-btn {
  width: 100%;
  height: 100%; /* 占满父元素li的高度 */
  border: none;
  background-color: transparent;
  padding: 0 16px;
  font-size: inherit;
  color: #333;
  cursor: pointer;
  text-align: left; /* 可根据需求调整对齐方式 */
}

/* 下拉菜单样式（可选，按需调整） */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

关键逻辑说明 #

• 给<ul class="nav-menu">设置height: 100%继承导航栏高度，同时用align-items: stretch让所有<li>自动拉伸至菜单容器的高度，确保每个导航项的高度和导航栏一致。
• 下拉按钮.dropdown-btn设置height: 100%，直接占满父元素<li>的高度，这样点击区域就完全覆盖了导航栏的上下高度。
• 这种结构完全符合HTML规范，<li>始终包裹在<ul>内，Lighthouse检测不会抛出错误。

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