title: How to convert li navbar dropdown with dropUp
body: <p>It's a simple bootstrap navbar with some li links. I want to convert dropdown to dropup.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar {
     background-color: #34A8F0;
  }
  .nav-link{
     display: flex;
     flex-direction: column;
     align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;script src="https://use.fontawesome.com/f1e10fbba5.js"&gt;&lt;/script&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
  
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Popper JS --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
     &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;nav class="navbar navbar-expand-md navbar-light "&gt;
        &lt;a class="navbar-brand" href="#"&gt;
           Navbar
        &lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
      
        &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav mx-auto"&gt;
            
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;User Managemnt&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Email&lt;/p&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Jobs&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;HRMS&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Sell&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item "&gt;
              &lt;a class="nav-link" href="#"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Notification&lt;/p&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Expenses&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Report&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
         &lt;/ul&gt;
          &lt;ul class="navbar-nav"&gt;
           &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;
                 &lt;p class="m-0 p-0"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p class="m-0 p-0"&gt;Email&lt;/p&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
     &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  I see how to convert but they use the button but I don't want to use the button I want this li. This dropdown open downward I want it open upward(dropup)
  I have many li that's why I can't use the button for li to dropup.</p>