I can't extend the side border to the height of the menu between each menu item

The below code is giving me problems. I'm trying to extend the border to separate each menu item. it works but it doesn't extend 100% of the menu height. Just curious how I can do this...here is the code:


<div class="menu">
<ul>
<li><a href="#">.</a></li>
<li><a href="#">New?</a></li>
<li><a href="#">Why</a></li>
<li><a href="#">Engage</a></li>
<li><a href="#">Missions</a></li>
<li><a href="#">Listen</a></li>
</ul>
</div>

----------------------
CSS:

.menu {


position: relative;

top: 120px;

background-color: lightgrey;
width: 85%;
margin: auto;


height: 40px;



}





.menu ul {


list-style-type: none;

text-align: center;

padding-top: 10px;
background-color: #4E5C47;

height: 38px;
font-size: 110%;
border: 1px solid #000;

}





.menu ul li {


border-right: 1px solid black;


display: inline;

padding-left: 10px;
background-color: #4E5C47;
padding-left: 30px;
padding-right: 30px;

}

.menu ul li a {
text-decoration: none;

background-color: #4E5C47;
color: white;


}

.menu ul li:last-of-type {
border-right: none;
}