user734861 user734861 - 1 year ago 80
HTML Question

Changing the background color of the tab in navigation bar after moving away the mouse

When you click on the About tab, it will show a drop down. The elements of the dropdown have light blue background. Now, when you move your mouse away from About when the drop down is still active then the background is white. I want to change the white background to the light blue background. How can i achieve this? I appreciate your help. Thanks!

<!DOCTYPE html>
<html lang="en">
<!-- Theme Made By - No Copyright -->
<title>Bootstrap Theme Company Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link href="" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet" type="text/css">
<script src=""></script>
<script src=""></script>

.navbar {
margin-bottom: 0;
background-color: #B21A09;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;

.navbar li a, .navbar .navbar-brand {
color: #fff !important;

.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;

.dropdown-menu {
background-color: #5A79A5;

.navbar-nav li a:hover, a:visited, .navbar-nav a {
background-color: #5A79A5 !important;

.dropdown-menu li a:hover {
background-color: #9CAAC6 !important;

a:active.dropdown-toggle {
background-color: #5A79A5 !important;


<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">HOME</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>

Answer Source

With how your current CSS is laid out, try to use:


  .open .dropdown-toggle{
        background-color: #9CAAC6 !important;


 <li class="dropdown open">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     <span class="caret"></span>

This question has been answered before: @Bimal Das

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download