Styling a bootstrap drop down nested in a button group - html

Question

I nested a drop down menu inside a group of buttons but I'm having a little trouble styling the drop down menu to look like the main buttons. It seems like there should be bootstrap classes to do this without using css?
I want the drop down items to show a dark background when hovered over, just like when the main buttons get hovered over. See pictures below
There looks to be some styling when the main buttons get clicked as well, no styling takes place when the drop down menu items get clicked.
I would like similar text in the drop down as the main buttons
I'm just trying to make things look consistent.
Here is my code with a partially working Fiddle and some pics that show the button group with drop down I'm trying to style.
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">House</button>
<button type="button" class="btn btn-default">Apartment</button>
<button type="button" class="btn btn-default">Studio</button>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Park</a></li>
<li><a>Beach</a></li>
<li><a>Field</a></li>
<li><a>BackYard</a></li>
<li><a>FrontYard</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
no highlighting when hovering over drop down menu items.

Answer 1

The dropdown menu options are notoriously light. If you want to adjust the shade of the hover effect, you can add your own CSS to match whatever theme you're using.
Here's how you'd do it for the default theme:
.btn-group .dropdown-menu li:hover a {
color: #333;
background-color: #E6E6E6;
border-color: #ADADAD;
}
Demo in Stack Snippet
.btn-group .dropdown-menu li:hover a {
color: #333;
background-color: #E6E6E6;
border-color: #ADADAD;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">House</button>
<button type="button" class="btn btn-default">Apartment</button>
<button type="button" class="btn btn-default">Studio</button>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Park</a></li>
<li><a>Beach</a></li>
<li><a>Field</a></li>
<li><a>BackYard</a></li>
<li><a>FrontYard</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>

Answer 2

Just add these to css file to get background color when hovering..
a:link {
text-decoration:none;
color:#2E3D4C;
font-weight: bold;
}
li a:hover {
color:#2E3D4C;
background-color:#C2E0FF;
}
ul.menu li ul {
visibility:hidden;
}
ul.menu li:hover ul {
visibility:visible;
}
ul.menu ul li:hover {
background-color:#6B8FB2;
}
li a:link {
display: block;
padding: 0px;
margin:1px;
}