如何实现带子菜单且顶级链接含居中展开动画下划线的纯CSS菜单？

完全可以实现这个效果。核心思路是给顶级导航链接添加伪元素来实现从中心向两侧展开的下划线动画，同时保留原有的子菜单hover触发逻辑。

关键实现步骤 #

• 给顶级<a>标签设置position: relative，为伪元素定位提供基准
• 用::after伪元素创建初始宽度为0的下划线，设置transform-origin: center确保动画从中心展开
• 通过li:hover a::after触发动画，将下划线宽度从0过渡到100%
• 保留原有的子菜单hover显示逻辑，确保两者互不干扰

修改后的完整代码 #

CSS代码

html {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-size: 100%;
}

body {
    background-color: #E9E3D3;
    font-size: 0.75em;
    margin : 0;
    padding : 0;
}

nav#mainmenu {
    padding: 0px;
}

nav#mainmenu a {
    color: #000000;
    display:block;
    font-weight: 600;
    font-size: 18px;
    padding: 10px 10px;
    text-decoration: none;
}

/* 给顶级链接添加下划线动画基础样式 */
nav#mainmenu > ul > li > a {
    position: relative;
}

nav#mainmenu > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #000;
    transform: translateX(-50%);
    transform-origin: center;
    transition: width 0.3s ease;
}

/* hover时触发下划线展开动画 */
nav#mainmenu > ul > li:hover > a::after {
    width: calc(100% - 20px); /* 减去padding的宽度，让下划线和文字范围匹配 */
}

nav#mainmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#mainmenu > ul > li {
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

nav#mainmenu > ul > li:first-of-type{
    margin-left: 0px;
}

ul > li:last-of-type{
    margin-right: 0px;
}

/* Sub Menus */

nav#mainmenu li ul {
    background-color: #ffffff;
    display: none;
    margin-left: -10px;
    padding: 0px;
    position: absolute;
}

nav#mainmenu li:hover ul{
  display: block;
}

nav#mainmenu li ul li {
  display: block;
  padding: 0px 10px;
}

nav#mainmenu li ul li a{
  font-weight: 400;
    color:#000000;
}

nav#mainmenu li ul li:hover {
    background-color: #00beee;
}

nav#mainmenu .menuexpandicon {
    top: 0px;
    fill: none;
    stroke-width: 2;
    stroke: #000000;
    margin: 0 0 2px 3px
}

HTML代码

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <nav id="mainmenu">
            <ul>
                <li><a href="#">Main Option1 <svg width="11" height="8" class ="menuexpandicon" viewBox="0 0 11 8"  xmlns="http://www.w3.org/2000/svg"><path d="M10 1.5L5.5 6.5L1 1.5" /></svg></a>
                    <ul>
                        <li><a href="#">sub option1</a></li>
                        <li><a href="#">sub option2</a></li>
                        <li><a href="#">sub option3</a></li>
                    </ul>
                </li>
                <li><a href="#">Main Option 2</a></li>
                <li><a href="#">Main Option 3 <svg width="11" height="8" class ="menuexpandicon" viewBox="0 0 11 8"  xmlns="http://www.w3.org/2000/svg"><path d="M10 1.5L5.5 6.5L1 1.5" /></svg></a>
                    <ul>
                        <li><a href="#">sub option1</a></li>
                        <li><a href="#">sub option2</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>

效果说明 #

• 鼠标悬停顶级菜单时，下划线从文字中心向左右平滑展开
• 子菜单的hover显示逻辑完全保留，不会和下划线动画冲突
• 下划线宽度通过calc(100% - 20px)匹配链接的内边距，视觉上更协调

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