Menu
My dropdown menu goes back to navbar-default colour when I click on it. And when I hover over the items in the dropdown menu, they go back to the navbar-default colour, as well.
Here's a picture of what I mean:
Here's my HTML:
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Cable</a></li>
<li><a href="#">DSl</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Business Cable</a></li>
<li><a href="#">Business DSL</a></li>
</ul>
</li>
<li><a href="#">Phone</a></li>
<li><a href="#">Android TV</a></li>
<li><a href="#">Shaw Direct</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
And here's my CSS:
.navbar-default {
background-color: #00AEFE;
}
.navbar-default:visited {
background-color: #00AEFE;
}
ul.dropdown-menu {
background-color: #00AEFE;
}
ul.dropdown-menu:hover {
background-color: #00AEFE;
}
373
To change the dropdown button color:Wrap your DropdownButton inside the Container . Inside the Container , add the decoration property and assign the BoxDecoration widget. Inside the BoxDecoration add the color property and assign the color of your choice. Run the app.
Example Explained Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.
simply do this with overwrite the bootstrap class
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
background-color: #00AEFE;
}
.nav > li > a:focus, .nav > li > a:hover {
background-color: #00AEFE;
}
check with the snippet is this what you need ? Run the snippet and change it to full screen mode then check
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
ul.dropdown-menu {
background-color: #00AEFE;
}
ul.dropdown-menu:hover {
background-color: #00AEFE;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
background-color: #00AEFE;
}
.nav > li > a:focus, .nav > li > a:hover {
background-color: #00AEFE;
}
</style>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Cable</a></li>
<li><a href="#">DSl</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Business Cable</a></li>
<li><a href="#">Business DSL</a></li>
</ul>
</li>
<li><a href="#">Phone</a></li>
<li><a href="#">Android TV</a></li>
<li><a href="#">Shaw Direct</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
