CSS: Menu with clickable logo inside - css

Question

http://jsfiddle.net/2esybgmo/
html {
margin: 20px;
background: url("Images/background.png")center no-repeat fixed;
}
ul,
img {
margin: 0;
padding: 0;
vertical-align: middle;
}
.menu,
.dropdown-menu {
list-style-type: none;
background-color: white;
border-radius: 7px;
}
.menu li {
margin-left: -4px;
display: inline-block;
text-align: center;
border-right: 1px solid #eaeaea;
}
.menu li:first-child {
background-color: #4b424f;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.menu li a {
color: black;
display: block;
height: 100%;
padding: 17px 25px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
text-decoration: none;
margin: 0;
}
.menu li:hover .dropdown-menu {
display: block;
}
ul.dropdown-menu {
position: absolute;
border-top-right-radius: 0;
border-top-left-radius: 0;
border: none;
display: none;
}
ul.dropdown-menu li {
display: block;
text-align: left;
margin: 0;
border: none;
border-bottom: 1px solid #eaeaea;
}
ul.dropdown-menu li:last-child {
border: none;
}
ul.dropdown-menu li:first-child {
border-top: 1px solid #eaeaea;
background-color: White;
border-top-left-radius: 0;
}
<div id="header">
<ul class="menu">
<li><img src="Images/logo.png" alt="logo" height="28" width="117"">
</li>
<li>The Product
</li>
<li>Order Yours
</li>
<li>About Us
</li>
<li>
Support
<ul class="dropdown-menu">
<li>Read our FAQ
</li>
<li>Post a Support Ticket
</li>
<li>Orders & Shipping
</li>
</ul>
</li>
<li>Get in touch with us
</li>
</ul>
<p></p>
<div style="visibility: hidden;" class="flexslider">
<ul class="slides">
<li>
<img src="Images/background.png" alt="img1" />
</li>
<li>
<img src="Images/background.png" alt="img2" />
</li>
<li>
<img src="Images/background.png" alt="img3" />
</li>
</ul>
</div>
</div>
I would like the gray lines (border-right) in li elements fill the whole ul area (as well as the tags) like it used to do. After adding the image into the list there are a few pixels "missing" and I think the problem is because the image itself is a bit higher than the text inside tags. How to do it without changing image or text size?