I'm trying to put a logo on the same line as the navigation bar with the links floated to the right. I put the image and the `ul` in the same div but how can I have the links stretch the same height as the image? For example, on hover on the links should be highlighted the entire height from the top of the screen to the bottom of the bar/logo. Right now it only highlights the link.

HTML

```
<section id="header">
        <div id="nav">  
            <img src="images/logo.png" alt="logo" style="width:15%;height:15%">     
            <ul id="menu">
                <li><a class="link" href="#home">Home</a></li>
                <li><a class="link" href="#about">What we do</a></li>
                <li><a class="link" href="projects.html">Projects</a></li>
                <li><a class="link" href="#careers">Careers</a></li>
                <li><a class="link" href="#contact">Contact</a></li>
            </ul>
            <!-- so float right won't work -->
            <br style="clear:both;" />
        </div>
</section>

```

CSS 

```
.logo {
   display: inline-block;
   float: left;
   vertical-align: middle;
}

#menu {
   float: right;
   display: inline-block;
   padding: 0;
   margin: 0;
   vertical-align: top;
}

#menu li {
   display: inline;
   vertical-align: center;
   float: left;
   padding: 0;
   margin: 0 5px 0 5px;
}

#menu li a {
   text-transform: uppercase;
   font-weight: bold;
   font-family: 'Open Sans';
   color: #696969;
   display: block;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
   -webkit-transition:color 0.5s ease-in;
   position: relative;
}

#menu li a:hover {
   color: #004080;
   background-color: #f2f2f2;
}

```

Here's my jsfiddle <https://jsfiddle.net/f86u3edt/>

For an idea, I'm going for something like this <http://michaelaldridge.com/>