How to make all child elements same height

I am creating a menu across the top of my page. All but one of the items in the menu is a single line, the other being 2 lines, high. I want to have the 1-line items the same height as the 2-line item but can’t figure out where to add the 100% height in my CSS. Here’s a textual version of what I have:

Home Products Staff Contact
[INDENT][INDENT][INDENT][INDENT]Us[/INDENT][/INDENT][/INDENT][/INDENT]

Right now, I have the text items centered vertically within their own elements, but the first 3 items have a different height than the last item thus making it appear to be floating when you roll over them instead of extending to the bottom of the menu’s height. Here is the HTML:

[code=html]<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>
<img src=”images/logoSmall.png” alt=”Mikey Heads Baits”>
<caption>Handmade for Finest Quality</caption>
</a>
</div>
<div id=”navbar” class=”collapse navbar-collapse”>
<ul class=”nav navbar-nav text-right”>
<li class=”active”>
<a href=”#”>Home</a>
</li>
<li class=”dropdown”>
<a href=”#products” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Products
<span class=”caret”></span>
<ul class=”dropdown-menu”>
<li>
<a href=”#”>Hooks</a>
</li>
<li>
<a href=”#”>Lures</a>
</li>
</ul>
</a>
</li>
<li>
<a href=”#staff”>Pro Staff</a>
</li>
<li>
<a href=”#photos”>Photo Gallery</a>
</li>
<li>
<a href=”#contact”>Contact</a>
</li>
<li>
<a>Rippin Lips<br>Schedule</a>
</li>
</ul>
</div>
</div>[/code]

and here’s the associated CSS for this element:

[code=html]#navbar
{
min-height: 110px;
vertical-align: bottom;
}

.navbar-brand
{
margin-left: 5px;
}

.navbar-nav
{
margin-top: 60px;
margin-left: 20px;
}

.navbar-brand > img
{
margin-left: 35px;
}

.navbar-nav > li
{
background-color: #F00; //Only made this a different color to display height of li
color: green;
font-size: 16px;
font-weight: bold;
text-align: center;
}[/code]

If you create a page with this code, you should see something similar to my first attached file (MenuNow). Instead, what I want is what is in the MenuWanted image.

Chris Cote

[canned-message]attachments-removed-during-migration[/canned-message]

Also in #CSS _↴