<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Waris</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact us</a> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <a class="dropdown-item" href="#">Link 4</a> <a class="dropdown-item" href="#">Link 5</a> <a class="dropdown-item" href="#">Link 6</a> </div> </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-default my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>

.navbar{ background: #0c73cc !important; } .dropdown{ border-radius:0; border:0; } .dropdown-menu{ background: #0c73cc; border:0; top:80%; border-radius:0px 0px 5px 5px; } .dropdown-item:hover{ background:#085ca5; color:#fff; } .dropdown-menu a{ color:#fff; } .navbar .nav-item .nav-link{ color:#eee !important; } .navbar .nav-item .nav-link:hover .navbar .nav-item .nav-link{ color:red !important; }

$(document).ready(function () { $('.navbar-light .dmenu').hover(function () { $(this).find('.sm-menu').first().stop(true, true).slideDown(150); }, function () { $(this).find('.sm-menu').first().stop(true, true).slideUp(105) }); });