I am new to web development. I recently grabbed this code snippet from bootstrap.com and I'm trying to customize it. I've managed to change the color of the navigation menu by modifying the CSS, but I'm struggling to identify which part of the code controls the hover state of the sub-menu items. Any help would be appreciated!
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Do You Know Jennipher</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Egyptian Paradise</a>
<a class="dropdown-item" href="#">Movie Madness</a>
<a class="dropdown-item" href="#">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Say Hello</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>The CSS I added looks like this:
.navbar{
background-color: #55C9EA;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.dropdown-menu{
background-color: #55C9EA;
}