How to adjust the tabs in my Shiny app to appear when hovering instead of creating new rows of tabs?

Question

The code for my application is:

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      body, .gt_table {
        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      }
      .title-wrapper {
        background-color: #6b4c2d;
        padding: 15px;
        margin-bottom: 0;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      }
      .title-wrapper h1, .person-ratings {
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 0;
        color: white;
        text-align: center;
        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        font-weight: normal;
      }
      .title-line1, .title-line2, .person-line {
        border: none;
        height: 7px;
        margin: 0;
        width: 100%;
      }
      .title-line1 {
        background-color: #e2eff5;
      }
      .title-line2 {
        background-color: #b8d8e7;
        margin-bottom: 10px;
      }
      .person-person {
        background-color: #6b4c2d;
        color: white;
        text-align: center;
        padding: 7.5px;
        font-weight: normal;
        font-size: 16.5px;
        margin-top: 5px;
      }
      .person-line {
        background-color: #b8d8e7;
      }
      .nav-tabs {
        border-bottom: none !important;
      }
      .nav-tabs > li.active > a {
        background-color: #b8d8e7 !important;
        color: white !important;
        font-weight: normal !important;
      }
      .nav-tabs > li > a {
        background-color: white !important;
        color: #6b4c2d !important;
      }
    "))
  ),
  div(class = "title-wrapper",
      HTML("<h1>Title</h1>")
  ),
  tags$hr(class = "title-line1"),
  tags$hr(class = "title-line2"),
    tabPanel("Person",
             fluidRow(
               column(width = 4, align = "center", offset = 4,
                      selectInput("person", "Choose a person:", choices = unique(df$name))
               )
             ),
             fluidRow(
               column(width = 8, offset = 2,
                      h3("--------", class = "person-person"),
                      hr(class = "person-line"),
                      uiOutput("person_tbl")
               ),
               column(width = 8, offset = 2,
                      plotOutput("person_plot")
               )
             )
             )
)

server <- function(input, output, session) {
  # server code here ---------
}

shinyApp(ui = ui, server = server)

Basically, my problem is adjusting the tabs in my application. Currently, I only have the "Person" tab, but I want to implement a new tab with subtabs. I have fooled around with creating the new tabs, which is the easy part, but I want the navigation to be more user friendly. Just adding the tabs gives you the generic click on a tab then another row of subtabs pop up and it is not very pleasing to the eye. I want to be able to hover over the new tab, call it "New Tab" and be able to see all of the subtabs, call them "Sub 1" and "Sub 2".