如何在R Markdown中自定义tabset.dropdown的样式

你之前编写的CSS规则不生效，核心原因是rmarkdown渲染的下拉标签集基于Bootstrap框架实现，默认样式优先级较高，且默认下拉菜单为点击触发，未配置hover状态的显隐逻辑，普通低权重选择器无法覆盖默认样式。
以下是可直接复用的实现方案，覆盖你提到的所有需求：

实现步骤 #

所有自定义效果均可通过纯CSS实现，无需额外编写JavaScript代码。

1. 编写自定义样式规则 #

以下代码分模块对应需求，你可以根据设计需要调整参数值：

/* 1. 实现鼠标悬停自动展开下拉 */
.nav-pills .tabset-dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* 消除触发器与菜单的间隙，避免鼠标移动过程中菜单意外收起 */
}

/* 2. 自定义下拉容器整体外观 */
.nav-pills .tabset-dropdown .dropdown-menu {
  border-radius: 6px; /* 调整菜单圆角 */
  border: 1px solid #e2e2e2; /* 调整菜单边框样式 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 调整菜单阴影效果 */
  min-width: 180px; /* 调整菜单最小宽度 */
  padding: 5px 0; /* 调整菜单内边距 */
  margin-top: 2px;
}

/* 3. 自定义下拉菜单项的字体、配色、对齐方式 */
.nav-pills .tabset-dropdown .dropdown-menu > li > a {
  font-size: 14px; /* 字体大小 */
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 字体类型 */
  color: #2d2d2d; /* 默认文字颜色 */
  text-align: left; /* 文本对齐方式，可替换为center/right */
  padding: 7px 18px; /* 菜单项内边距 */
  line-height: 1.6;
}

/* 菜单项悬停状态样式 */
.nav-pills .tabset-dropdown .dropdown-menu > li > a:hover,
.nav-pills .tabset-dropdown .dropdown-menu > li > a:focus {
  background-color: #f0f7ff; /* 悬停背景色 */
  color: #1677ff; /* 悬停文字颜色 */
}

/* 当前选中菜单项样式 */
.nav-pills .tabset-dropdown .dropdown-menu > li.active > a {
  background-color: #1677ff; /* 选中项背景色 */
  color: #ffffff; /* 选中项文字颜色 */
}

2. 引入样式到Rmd文档 #

你可以选择任意一种方式引入上述样式：

• 方式一：将上述CSS代码保存为custom.css文件，和Rmd文档放在同一目录，在YAML头部添加css配置：

---
output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
    css: custom.css
---

• 方式二：直接将CSS代码包裹在<style>标签中，放在Rmd文档正文开头（setup代码块之后即可），不需要额外修改YAML配置。

完整可运行示例 #

---
output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
---

`r ''````{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

<style>
/* 粘贴上述自定义CSS代码即可 */
.nav-pills .tabset-dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}
.nav-pills .tabset-dropdown .dropdown-menu {
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-width: 180px;
  padding: 5px 0;
  margin-top: 2px;
}
.nav-pills .tabset-dropdown .dropdown-menu > li > a {
  font-size: 14px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #2d2d2d;
  text-align: left;
  padding: 7px 18px;
  line-height: 1.6;
}
.nav-pills .tabset-dropdown .dropdown-menu > li > a:hover,
.nav-pills .tabset-dropdown .dropdown-menu > li > a:focus {
  background-color: #f0f7ff;
  color: #1677ff;
}
.nav-pills .tabset-dropdown .dropdown-menu > li.active > a {
  background-color: #1677ff;
  color: #ffffff;
}
</style>

## Title {.tabset .tabset-fade .tabset-pills}

### Subject1 {.tabset .tabset-dropdown}

#### How can i customize this?
测试内容1

#### How can i customize this?
测试内容2

### Subject2 {.tabset .tabset-dropdown}

#### How can i customize this?
测试内容3

#### How can i customize this?
测试内容4

如果个别样式依旧被默认样式覆盖，可以在对应CSS属性值后添加!important强制生效，例如display: block !important;，正常情况下按上述选择器编写规则不需要额外添加。

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