如何利用 CSS 制作带有箭头的导航栏

<nav>
<ul class="nav-list">
<li><a href="#" class="active">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">关于我们</a></li>
<!-- 更多链接项... -->
</ul>
</nav>

<!-- 在需要展示下拉菜单或有指向性的地方添加箭头元素 -->
<a href="#submenu" class="arrow-down"></a>

/* 首先设置基本导航栏样式 */
.nav-list {
list-style-type: none;
padding: 0;
margin: 0;
}

.nav-list li {
display: inline-block;
position: relative; /* 这将允许我们在子元素上定位箭头 */
}

.nav-list a {
text-decoration: none;
color: #333;
padding: 12px 24px;
transition: background-color .5s ease-in-out;
}

.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid black; /* 根据主题颜色更改此值 */
display:inline-block;
top: calc(100% + 5px); /* 将其放置于父级下方一点以形成悬停弹出的效果 */
left: 50%;
transform: translateX(-50%);
position:absolute;
}


.active,
.nav-list a:hover {
background-color: lightgray;
}

/* 当鼠标悬浮到含有箭头的元素上方时显示关联内容，并调整箭头位置（如适用）*/
.nav-list > li:hover .sub-menu {/* 子菜单相关代码 */ }
.nav-list > li:hover .arrow-down {
opacity: 1; /* 如果默认隐藏的话可以在这里切换可见度 */;
animation-name: arrow-drop;
animation-duration: 0.7s;
}

@keyframes arrow-drop {
from {
opacity: 0;
transform: translateY(-6px);
} to {
opacity: 1;
transform: translateY(0);
}
}