Horizontal menu: How to get li items side by side (no whitespace)?

Question

I want the list elements to be side by side. I don't want any space between the top and bottom of the div. When I hover a link I want the background color to change and it must be the height of the whole div. Sorry for my bad English. I'm using LESS. Here's my code:

HTML:

<div class="upper-links">
    <ul class="upper-nav">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
</div>

CSS:

.upper-nav {
    list-style-type: none;
    background-color:#003264;
    height:auto;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
}
.upper-nav li {
    display:inline;
    list-style-type: none;
    background-color:#003264;
    padding:10px;
    vertical-align: center;
    float:left;
    height:50px;
    text-transform: uppercase;
    .selected {
        background-color:#fff;
    }
     a:link, a:visited {
        background-color:#003264;
        color:#fff;
        display: inline-block;
        height:100%;
        text-decoration: none;
    }
    a:hover, a:active {
        background-color:#fff !important;
        color:#003264;
        display: inline-block;
        height:100%;
        text-decoration: none;
    }
}

Answer 1

Try setting padding on your <a> elements, remove padding from <li> elements, and set a box-sizing: border-box for <a> elements to include their padding in their defined height

     .upper-nav{
        list-style-type: none;
        background-color: #003264;
        height: auto;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
     }
     .upper-nav li{
        display: inline;
        list-style-type: none;
        background-color: #003264;
        vertical-align: middle;
        float: left;
        height: 50px;
        text-transform: uppercase;
        .selected{
           background-color: #fff;
        }
        a:link, a:visited{
           background-color: #003264;
           color: #fff;
           display: inline-block;
           height: 100%;
           text-decoration: none;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
           padding: 10px;
        }
        a:hover, a:active{
           background-color: #fff !important;
           color: #003264;
           display: inline-block;
           height: 100%;
           text-decoration: none;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
           padding: 10px;
        }
    }