After copying and pasting a dropdown menu from bootstrap, I decided to experiment with it. Initially, I used the dropdown as a button, but then switched it to anchor tags. However, when I made this change, unwanted borders suddenly appeared and no matter what I tried, I couldn't remove them.
https://i.sstatic.net/BHSRD.png
<div class="d-flex flex-column flex-md-row justify-content-center pb-3 px-md-4 mb-0 bg-white border-bottom box-shadow">
<div class="btn-group">
<div class="dropdown">
<a href="#" onclick="loadPage('Crabs')" class="btn btn-secondary dropdown-toggle ml-3 mr-3 navbartext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" href="#" onclick="gotoDetail('cr01')">Medium Soft Shell Crabs</a>
<a class="dropdown-item" href="#" onclick="gotoDetail('cr02')">Hotel Soft Shell Crabs</a>
<a class="dropdown-item" href="#" onclick="gotoDetail('cr03')">Prime Soft Shell Crabs</a>
<a class="dropdown-item" href="#" onclick="gotoDetail('cr04')">Jumbo Soft Shell Crabs</a>
<a class="dropdown-item" href="#" onclick="gotoDetail('cr05')">Whale Soft Shell Crabs</a>
<a class="dropdown-item" href="#" onclick="gotoDetail('cr06')">Crab Meat</a>
</div>
</div>
</div>
</div>
#dropdownMenu2 {
background-color: #ffffff;
color: #4d4d4d;
}
.dropdown-menu {
text-transform: capitalize;
}
/* Removes caret from dropdown menu button */
.dropdown-toggle::after{
display: none;
}
.dropdown:hover .dropdown-menu{
display: inherit;
}