二级导航栏hover优化：实现块级hover而非仅文本行

核心问题是当前的inline-block布局无法让单行文本的<a>标签撑满父元素高度，导致hover效果仅覆盖文本区域。通过调整为Flex布局可以轻松解决，同时保持导航栏横向排列且文本居中：

修改后的CSS代码 #

#menu-h ul {
  max-width: 1600px;
  min-height: 57px;
  list-style: none;
  padding: 0;
  margin: auto;
  background-color: rgb(204, 204, 204);
  /* 改用flex布局，让li横向排列并垂直居中 */
  display: flex;
  align-items: center;
}

#menu-h ul li {
  /* 每个li平分宽度，替代固定百分比，布局更灵活 */
  flex: 1;
  height: 100%;
}

#menu-h ul li a {    
  border-radius: 10px;
  /* 用flex让文本垂直+水平居中，同时撑满li的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 5px; /* 左右留白，避免文本贴边 */
  transition: background .5s;
  color: #483e3e; 
  text-decoration: none;
  font-size: 17px;
}

#menu-h ul li a:hover {
  background-color: rgb(166, 232, 57);
  border-radius: 10px;
  color: white;
  border-bottom: 6px inset rgb(19, 83, 57);
}

关键修改说明 #

• 将<ul>改为Flex布局，替代原有的inline列表项方式，更易控制元素对齐和高度
• 给<li>设置flex:1，让所有分类项自动平分导航栏宽度，避免固定百分比的适配问题
• 将<a>标签改为Flex布局并设置height:100%，确保它完全撑满父级<li>的高度，无论文本是一行还是两行，hover效果都会覆盖整个块区域
• 通过align-items:center和justify-content:center实现文本的垂直+水平居中，无需手动添加<br>标签调整

这样修改后，"Agricultura"这类单行文本的分类项hover效果会和多行文本的分类项完全一致，整个块区域都会触发样式变化。

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