How can I customize and style tabset.dropdown in R Markdown?

Question

I want to change the apperance of my dropdown tabset in R Markdown. For example, I want my dropdown to expand on hover and change the overall apperance of the box. Furthermore I want to change font, color, and text-alignment within the dropdown. I have tried a lot of different methods in my .css file without any success. See code and picture below.

This is the dropdown I want to customize

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

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

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

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

#### How can i customize this?

#### How can i customize this?

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

#### How can i customize this?

#### How can i customize this?

Answer 1

You need to add styles.css in your r code at the top, and also as a new file in your folder.

R Code

---
output:
  html_document:
    theme: paper
    highlight: tango
    number_sections: false
    toc: false
    toc_float: false
    css: styles.css
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

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

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

#### How can i customize this?

#### How can i customize this?

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

#### How can i customize this?

#### How can i customize this?

CSS code (styles.css):

.nav-tabs > li.active:nth-child(1) > a {
  background-color: #E8C120;
}

.nav-tabs > li > a {
  background-color: #5882A6;
  color: red;
}

OUTPUT: