I can't make a clean drop down menu - html

Question

I'm adjusting someone else's code, html is not my thing. For some reason the code makes the drop down menu change, sometimes to two parts. I would much rather a dropdown menu that just works directly and doesn't change. Was hoping someone can tell me why it acts the way it does.
Below is the code and am including a before and after image
Thanks
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=“/index.html” id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="sales.html">Sales</a>
<a class="dropdown-item" href="/management">Management</a>
<a class="dropdown-item" href="/bartending">Bartending</a>
<a class="dropdown-item" href="/print">My Name In Print</a>
<a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a>
</div>
</li>
</ul>
</div>

Answer 1

usually (but not always) a dropdown list is a nested list inside of an li that is controlled by a button like this
<ul>
<li>regular link</li>
<li>
<button>drop down</button>
<ul>
<li>drop down link 1</li>
<li>drop down link 2</li>
</ul>
</li>
</ul>
so yours might end up looking something like this:
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<button>menu</button>
<ul>
<li><a class="dropdown-item" href="index.html">Home</a></li>
<li><a class="dropdown-item" href="sales.html">Sales</a></li>
<li><a class="dropdown-item" href="/management">Management</a></li>
<li><a class="dropdown-item" href="/bartending">Bartending</a></li>
<li><a class="dropdown-item" href="/print">My Name In Print</a></li>
<li><a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a</li>
</ul>
</li>
</ul>
</div>
Ill also include an example of a drop down I created to help you with those aria attributes sorry in advance for the lack of style on it. Hope this helps.
<header id="sitewide-header">
<ul id="visible-navigation">
<li id="logo-container">vertical template</li>
<li id="control-container"><button id="menu-button" aria-expanded="false" aria-controls="toggled-navigation">menu</button></li>
</ul>
<nav id="navigation-container">
<ul id="toggled-navigation" aria-hidden="true" aria-labelledby="menu-button">
<li>home section</li>
<li>section two</li>
<li>
<button id="dropdown1-button" aria-expanded="false" aria-controls="dropdown-one">three – five</button>
<ul id="dropdown-one" aria-hidden="true" aria-labelledby="dropdown1-button">
<li>section three</li>
<li>section four</li>
<li>section five</li>
</ul>
</li>
<li>section six</li>
</ul>
</nav>
</header>