CSS实现导航栏子菜单展开时底部边框持续显示

问题描述 #

我正在制作带下拉子菜单的导航栏，主菜单元素鼠标悬停时会显示底部橙色边框，同时展开子菜单。但现在把光标移到子菜单上时，主菜单的底部边框就消失了，我希望子菜单展开期间，这个边框能一直显示。

解决方案 #

问题根源在于当前的hover事件仅绑定在主菜单的<a>标签上，当鼠标移到子菜单时，<a>的hover状态丢失，导致边框消失。我们需要将hover状态绑定到主菜单的父级<li>元素上，这样只要鼠标处于主菜单<li>或其子菜单范围内，hover状态就会持续生效。

修改后的完整CSS代码 #

nav {
  display: inline-flex;
  width: 100%;
}

.nav-list {
  display: flex;
  width: 100%;
  margin-top: .7rem;
  /*Use this to change the postition of dropdown*/
  padding-left: 1.1rem;
  /*Use this to move the dropdown left and right*/
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1rem;
  padding: 1.3rem 1rem;
  text-transform: uppercase;
}

.nav-list>li>a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 4px;
  width: 0;
  left: 0;
  bottom: -0.5px;
  /* 可选：添加过渡动画让边框显示更平滑 */
  transition: width 0.3s ease;
}

/* 将hover绑定到父级li元素，确保子菜单展开时边框持续显示 */
.nav-list>li:hover>a:after {
  width: 100%;
}

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: black;
  visibility: hidden;
  top: 3.89rem;
  /*adjust postion */
  left: -4rem;
  width: 82.5rem;
  height: 35rem;
  z-index: 5000;
  /* 可选：添加过渡动画让子菜单展开更平滑 */
  transition: visibility 0.3s ease;
}

/* 父级li hover时显示子菜单 */
.nav-list>li:hover .sub-menu {
  visibility: visible;
}

.sub-menu a {
  position: relative;
  top: 2rem;
  color: white;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
}

.sub-menu a:hover {
  color: #7e7978;
}

HTML代码（无需修改） #

<div class="main" id="navbar">
  <nav>
    <ul class="nav-list">
      <li>
        <a href="">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

关键修改说明 #

• 把.nav-list>li>a:hover:after替换为.nav-list>li:hover>a:after：让主菜单边框的显示逻辑依赖于父级<li>的hover状态，而非仅<a>标签的hover状态，确保鼠标移到子菜单时边框不消失。
• 添加.nav-list>li:hover .sub-menu { visibility: visible; }：让子菜单的展开也绑定到父级<li>的hover状态，保证子菜单和边框的显示状态同步。
• 可选的transition属性：给边框和子菜单添加平滑过渡效果，优化交互体验。

内容的提问来源于stack exchange，提问作者Thor The dog