When designing my website with Bootstrap 5, I utilized the framework to create the navbar. Incorporating my own CSS, I enabled the services dropdown to open on hover. However, upon testing, I observed an unexpected white underline appearing under the services dropdown in addition to the intended orange underline.
Test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | </title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecbd0cdd0ce">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
...
// Rest of the HTML code has been omitted for brevity.
Test.css
@media (min-width: 576px) {
.dropdown:hover > .dropdown-menu {
display: block;
background-color: hsl(210, 45%, 30%);
margin-top: 0;
width: 175px;
.btn {
color: hsl(0, 0%, 100%);
}
.dropdown-item:hover {
background-color: hsl(210, 55%, 41%);
}
}
}
#navbar-color {
background-color: hsl(210, 45%, 30%);
}
.navbar-light ...
// Rest of the CSS code has been omitted for brevity.