仅用HTML/CSS实现下拉菜单SVG箭头切换及样式修改问题

针对你遇到的三个核心问题（箭头展开/折叠方向切换、SVG填充色无法修改、hover/active状态下字体与图标颜色同步），以下是纯HTML5+CSS3的解决方案，结合Bootstrap自带的类实现无需JS的状态控制：

第一步：清理HTML冗余代码 #

移除内嵌的SVG箭头，改用Bootstrap的.dropdown-toggle::after伪元素实现箭头，避免重复元素冲突：

<nav class="nav my-4">
    <li class="nav-link px-5 active fw-bold border-bottom border-2">
        <a class="text-decoration-none small" href="#">Título 1</a>
    </li>
    <li class="nav-link px-5">
        <a class="text-decoration-none text-grey-20 small" href="#">Título 2</a>
    </li>
    <li class="nav-link px-5">
        <a class="text-decoration-none text-grey-20 small" href="#">Título 3</a>
    </li>
    <li class="nav-link px-5">
        <a class="text-decoration-none dropdown dropdown-toggle small mw-ch-17" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Título 4
        </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <li><a class="dropdown-item" href="#">Ítem 1</a></li>
            <li><a class="dropdown-item" href="#">Ítem 2</a></li>
            <li><a class="dropdown-item" href="#">Ítem 3</a></li>
        </ul>
    </li>
    <li class="nav-link px-2">
        <a href="#" type="button">
            <span class="material-icons text-grey-20">
                keyboard_arrow_right
            </span>
        </a>
    </li>
</nav>

第二步：CSS实现所有需求 #

.mw-ch-17 {
    max-width: 17ch;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
} 

/* 导航项hover/active背景色 */
.nav-link:hover {
    background-color: #E7F0F4;
    border-radius: 5px 5px 0 0;
}
.nav-link:active {
    background-color: #CFE0E8;
    border-radius: 5px 5px 0 0;
}

/* hover/active状态下，文本与图标统一变色 */
.nav-link:hover a,
.nav-link:active a {
    color: #000 !important;
}
.nav-link:hover .material-icons,
.nav-link:active .material-icons {
    color: #000 !important;
}

/* 下拉箭头基础样式：用currentColor继承文本颜色 */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.47146 0.294922L6.06146 4.87492L10.6515 0.294922L12.0615 1.70492L6.06146 7.70492L0.0614624 1.70492L1.47146 0.294922Z' fill='currentColor'/%3E%3C/svg%3E");
    border: none;
    transition: transform 0.2s ease-in-out; /* 平滑旋转过渡 */
}

/* 下拉展开时，箭头翻转180度（Bootstrap自动添加show类） */
.dropdown-toggle.show::after {
    transform: rotate(180deg);
}

/* 初始灰色文本类 */
.text-grey-20 {
    color: #666;
}

关键说明 #

1. 箭头方向切换：Bootstrap在下拉菜单展开时会自动给.dropdown-toggle添加show类，利用这个类配合CSS旋转实现箭头方向变化，完全无需额外JS。
2. SVG填充色问题：原来的SVG内部path硬编码了fill="#666"，导致外部CSS无法覆盖。改成fill="currentColor"后，箭头颜色会自动继承父元素的文本颜色，hover/active时只需修改文本颜色，箭头同步变化。
3. 状态颜色统一：通过.nav-link:hover a统一控制导航项内所有文本的颜色，Material Icons也通过相同的选择器同步变色，确保状态一致。

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