The dropdown-item class functions correctly only when used with the dropdown class, but does not work with the dropup class.
The dropup feature fails to function after clicking on all submenu items. This is because all dropdown-items become active and visible after each click.
Code Snippet and Scenario Images of the issue provided below.
1. First Image: All Submenus Active and Visible
https://i.sstatic.net/LZ5PS.jpg
2. Second Image: Inspect Element
https://i.sstatic.net/9nT37.jpg
<!doctype html>
<html lang="en>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>DropUp bootstrap</title>
</head>
<body>
<ul class="nav flex-column">
<li class="nav-item dropdown mb-5">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropDown</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
<a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
<a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
</div>
</li>
<li class="nav-item dropup mt-5">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropUp</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
<a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
<a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
</div>
</li>
</ul> <!-- End nav -->
<div class="tab-content mt-1">
<div class="tab-pane fade" id="hello1">
<h1>Hello 1</h1>
</div> <!-- End hello1 -->
<div class="tab-pane fade" id="hello2">
<h1>Hello 2</h1>
</div> <!-- End hello2 -->
<div class="tab-pane fade" id="hello3">
<h1>Hello 3</h1>
</div> <!-- End hello3 -->
</div> <!-- End tab-content -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>