如何实现与Pages菜单一致的图标下拉动画效果？

问题根源 #

原代码存在两个核心问题：

• HTML结构不规范：设置菜单的<a>标签直接嵌套<ul class="dropdown">，不符合语义规范，导致hover事件无法正确触发下拉菜单
• CSS选择器错误：设置菜单的hover触发逻辑和样式选择器与Pages菜单结构不匹配，无法复用动画效果

修复后的HTML代码 #

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap"
rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<header class="header">
    <div class="container">
        <div class="row">
            <div class="col-lg-2">
                <div class="header__logo">
                    <a href="./index.html"><img src="img/logo.png" alt=""></a>
                </div>
            </div>
            <div class="col-lg-10">
                <div class="header__nav__option">
                    <nav class="header__nav__menu mobile-menu">
                        <ul>
                            <li><a href="#">Pages</a>
                                <ul class="dropdown">
                                    <li><a href="./about.html">About</a></li>
                                    <li><a href="./portfolio.html">Portfolio</a></li>
                                    <li><a href="./blog.html">Blog</a></li>
                                    <li><a href="./blog-details.html">Blog Details</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                    <div class="header__nav__settings">
                        <ul>
                            <!-- 对齐Pages菜单结构：用li包裹触发按钮和下拉菜单 -->
                            <li>
                                <a href="#"><i class="fa fa-gear"></i></a>
                                <ul class="dropdown">
                                    <li><a href="./portfolio.html">Portfolio</a></li>
                                    <li><a href="./blog.html">Blog</a></li>
                                    <li><a href="./blog-details.html">Blog Details</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="mobile-menu-wrap"></div>
    </div>
</header>

修复后的CSS代码 #

.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9;
}
.header__nav__menu {
  display: inline-block;
  margin-right: 45px;
}
.header__nav__menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 45px;
  position: relative;
}
.header__nav__menu ul li.active a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}
.header__nav__menu ul li:last-child {
  margin-right: 0;
}
.header__nav__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 140px;
  background: black;
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__nav__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}
.header__nav__menu ul li .dropdown li a {
  font-size: 14px;
  color: white;
  padding: 8px 20px;
  text-transform: capitalize;
}
.header__nav__menu ul li .dropdown li a:after {
  display: none;
}
.header__nav__menu ul li a {
  font-size: 15px;
  font-family: "Play", sans-serif;
  color: black;
  display: block;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}
.header__nav__menu ul li a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #00bfe7;
  content: "";
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

/*Settings Dropdown*/

.header__nav__settings {
  display: inline-block;
  position: relative;
  padding-left: 50px;
}
.header__nav__settings:before {
  position: absolute;
  left: 0;
  top: 4px;
  height: 13px;
  width: 2px;
  background: rgba(225, 225, 225, 0.2);
  content: "";
}
.header__nav__settings ul {
  margin: 0;
  padding: 0;
}
.header__nav__settings ul li {
  list-style: none;
  display: inline-block;
  position: relative;
}
.header__nav__settings ul li a {
  color: black;
  font-size: 15px;
  padding: 6px 0;
  display: block;
}
.header__nav__settings ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}
.header__nav__settings ul li .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 140px;
  background: black;
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__nav__settings ul li .dropdown li {
  display: block;
  margin-right: 0;
}
.header__nav__settings ul li .dropdown li a {
  font-size: 14px;
  color: white;
  padding: 8px 20px;
  text-transform: capitalize;
  font-family: "Play", sans-serif;
}
.header__nav__settings ul li .dropdown li a:after {
  display: none;
}

.slicknav_menu {
  display: none;
}

核心修改说明 #

1. 结构对齐：将设置菜单调整为和Pages菜单一致的嵌套结构，用<li>包裹触发按钮与下拉菜单，确保hover事件能正确传递
2. 选择器统一：为设置菜单的<li>添加和Pages菜单相同的hover触发逻辑，复用0.3s过渡动画
3. 样式清理：删除冗余错误的选择器定义，统一下拉菜单的字体、内边距等样式，保证视觉与动画效果完全匹配

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