移动端下拉菜单出现蓝色线条的Quarto网站问题求助

我用R语言通过Quarto发布网站，桌面端（包括桌面端模拟移动端）显示完全正常，但用iPhone访问并点击下拉菜单时，会出现蓝色线条。

初始配置（.yml文件末尾） #

format:
  html:
    css: styles.css
    toc: true

已尝试但无效的CSS代码 #

.header-menu-sidebar .nav-ul a {
    outline: none !important;
}

.et_mobile_menu {
  border-top: 2px solid
  ##ff5733!important;
}

更新补充信息 #

1. 完整.yml配置 #

project:
  type: website

website:
  title: "helloworld"
  navbar:
    left:
      - text: Home
        menu:
          - href: index.qmd
        
    right:
      - text: ABOUT
        menu: 
          - text: Education

format:
  html:
    css: styles.css
    toc: true

2. 当前styles.css内容 #

/* css styles */


.navbar-dark {
    background-color: #222222;
}

解决思路 #

1. 禁用iOS Safari点击高亮：iOS Safari默认会给可点击元素添加蓝色点击高亮效果，直接通过CSS全局或针对性禁用：

/* 全局禁用所有可点击元素的iOS高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 仅针对导航菜单元素 */
.navbar .dropdown-menu a {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

2. 匹配Quarto真实DOM类名：之前用的.header-menu-sidebar .nav-ul可能不是Quarto生成的实际类名。可以通过Safari开发者工具（连接电脑开启iPhone调试）查看下拉菜单元素的真实类，比如Quarto的下拉菜单通常带有.dropdown-menu类，针对性清除轮廓：

.dropdown-menu a:focus, .dropdown-menu a:active {
  outline: none;
  box-shadow: none;
}

3. 修复无效CSS语法：之前尝试的.et_mobile_menu代码存在语法错误（颜色值多写了一个#），修正后：

.et_mobile_menu {
  border-top: 2px solid #ff5733 !important;
}

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