/*在dropdown.css文件末尾添加下面代码*/
/* ================================================= */
/* 纯 CSS 实现下拉箭头 (无需修改 HTML) */
/* 原理:只针对 href="#" 的菜单项显示箭头 */
/* ================================================= */
.nav li a[href="#"]::after {
content: ""; /* 必须有 content 才能显示 */
display: inline-block; /* 让它像文字一样排列 */
width: 0;
height: 0;
margin-left: 6px; /* 箭头距离文字的左边距 */
vertical-align: middle; /* 垂直居中 */
/* 绘制倒三角形 */
/* 下面三行决定箭头大小。数字越小,箭头越小 */
/* 建议:3px (精致), 4px (清晰), 2.5px (极小) */
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #789d5d; /* 颜色与页眉和导航栏的绿色一致 */
/* 微调位置,防止把行高撑开 */
position: relative;
top: -1px;
opacity: 0.7; /* 稍微透明一点,看起来更精致 */
}
/* (可选) 鼠标悬停时,如果想让箭头变色,可以取消下面注释 */
.nav li:hover > a[href="#"]::after {
border-top-color: #000;
opacity: 1;
}
/*************************************************************************************************/
/*********************************************另一个版本,注意区分******************************/
/* ================================================= */
/* 纯 CSS 实现下拉箭头 (无需修改 HTML) */
/* 原理:只针对 href="#" 的菜单项显示箭头 */
/* ================================================= */
.nav li a[href="#"]::after {
content: ""; /* 必须有 content 才能显示 */
display: inline-block; /* 让它像文字一样排列 */
width: 0;
height: 0;
margin-left: 2px; /* 箭头距离文字的左边距 */
vertical-align: middle; /* 垂直居中 */
/* 绘制倒三角形 */
/* 下面三行决定箭头大小。数字越小,箭头越小 */
/* 建议:3px (精致), 4px (清晰), 2.5px (极小) */
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 3.5px solid currentColor; /* currentColor表示颜色与页眉和导航栏的绿色一致,也可以调整为自定义颜色,如何页眉一样的绿色#78935d */
/* 微调位置,防止把行高撑开 */
position: relative;
top: -1px;
/* 【可选修改】如果你希望颜色完全一致,建议将透明度改为 1 或 0.9 */
/* 原来的 0.7 会让箭头看起来比文字浅一点 */
opacity: 0.9; /* 稍微透明一点,看起来更精致 */
}
/* (可选) 鼠标悬停时,如果想让箭头变色,可以取消下面注释 */
.nav li:hover > a[href="#"]::after {
border-top-color: #78935d; /*原来变色的颜色为 #000*/
opacity: 1;
}