如何使用 dropUp 转换 li navbar 下拉列表

Question

这是一个带有一些 li 链接的简单 bootstrap 导航栏。我想将下拉菜单转换为下拉菜单。

.navbar {
   background-color: #34A8F0;
}
.nav-link{
   display: flex;
   flex-direction: column;
   align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <nav class="navbar navbar-expand-md navbar-light ">
      <a class="navbar-brand" href="#">
         Navbar
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">User Managemnt</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Jobs</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">HRMS</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Sell</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Notification</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Expenses</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Report</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
       </ul>
        <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
        </ul>
      </div>
    </nav>

   </nav>
</body>
</html>

我知道如何转换，但他们使用按钮，但我不想使用我想要这个 li 的按钮。这个下拉菜单向下打开我希望它向上打开（dropup）我有很多 li，所以我不能使用 li 的按钮来删除。

Answer 1

.dropdown-menu.show{
top:-50px;
position:absolute;
}

试试这个

Answer 2

打开时在下拉列表中添加 position:absolute 和 top:-75px。

.navbar {
   background-color: #34A8F0;
}
.nav-link{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.dropdown-menu.show {
   top: -75px;
   position: absolute !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <nav class="navbar navbar-expand-md navbar-light ">
      <a class="navbar-brand" href="#">
         Navbar
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">User Managemnt</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Jobs</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">HRMS</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Sell</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Notification</p>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Expenses</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Report</p>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
       </ul>
        <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">
               <p class="m-0 p-0"><i class="fa fa-home"></i></p>
               <p class="m-0 p-0">Email</p>
            </a>
          </li>
        </ul>
      </div>
    </nav>

   </nav>
</body>
</html>

Answer 3

<div class="dropup">  
  <button class=" btn nav-value   dropdown-toggle" type="button" data-toggle="dropdown">Sell
  <span class="caret"></span></button>  
  <ul class="dropdown-menu">  
    <li><a href="#">All Sales</a></li>  
    <li><a href="#">Add Sales</a></li>  
    <li><a href="#">List POS</a></li>  
    <li><a href="#">POS</a></li>
    <li><a href="#">List Drafts</a></li>
    <li><a href="#">List Qoutation</a></li>
    <li><a href="#">List Sell Return</a></li>
    <li><a href="#">Shipment</a></li>
    <li><a href="#">Discounts</a></li>

  </ul>  
</div>

如何使用 dropUp 转换 li navbar 下拉列表

How to convert li navbar dropdown with dropUp

html

javascript

css

bootstrap-4