Bootstrap 4 drop-down triggers wrong item - html

Question

I'm working on a navigation bar where 2 items have drop-down menus. The first drop-down works fine but the second one always triggers the first one. I've tested it after removing any extra styles I've added but it still isn't working.
I'm sure it's something obvious but I just can't seem to figure it out.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="css/app.css" rel="stylesheet" />
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="assets/logo.png">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="./index.html">
Home
</a>
<a class="nav-item nav-link" href="./tour.html">
Tour
</a>
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
<a class="nav-item nav-link" href="./about.html">
About
</a>
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</div>
</div>
</div>
</nav>

Answer 1

In my case, the issue was I didn't wrap the entire dropdown (both the triggering element, and the menu items) inside a <div class="dropdown">. It still worked, until I added a second dropdown and found it was being triggered by the wrong element.
Bootstrap 4 dropdowns should have the following basic structure:
<div class="dropdown">
Triggering Element
<div class="dropdown-menu">
Item One
Item Two
Item Three
</div>
</div>
I was missing the outer <div>.

Answer 2

Please use <li class="nav-item"><li> in navbar not use direct a tag. Like below code.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="assets/logo.png">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">
Home
</a>
<li>
<li class="nav-item">
<a class="nav-link" href="./tour.html">
Tour
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</li>
</div>
</div>
</div>
</nav>

Answer 3

The suggestion from the other answer regarding a tags for dropdowns in navbar is WRONG.
You certainly CAN use purely a tags the way you were using them without any problems.
Only when it comes to multiple drop-down items, when you have more than one drop-down, you need to wrap them in a div with the class btn-group like shown in the code snippet below. (strictly speaking, the first drop-down doesn't need to be wrapped this way, but I did it anyway for consistency)
Click "run code snippet" below and expand to full page for live testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="https://placehold.it/30">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="./index.html">
Home
</a>
<a class="nav-item nav-link" href="./tour.html">
Tour
</a>
<div class="btn-group">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
</div>
<a class="nav-item nav-link" href="./about.html">
About
</a>
<div class="btn-group">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>