How to make navigation hover as background - css

Question

I am UI UX Designer and big learner of CSS and HTML5, I am doing some practice but stuck in one thing:
Here is the screenshot I wish to build:
http://goo.gl/RK5i0y
(the mouse over effect)
HTML
<nav>
<ul>
<li>Home</li>
<li>Our Company</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
nav ul {
margin-top: 60px;
padding: 0;
float: right;
text-transform: uppercase;
}
nav ul li {
list-style: none;
float: left;
font-size:15px;
padding-right:57px;
}
header nav ul li a {
display: block;
color: #fff;
text-decoration: none;
/*font-weight: bold;*/
/*padding-right: 57px;*/
}
header nav ul li a:hover {
background: #00335a;
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
}

Answer 1

How about this?
nav {
height: 160px;
background: linear-gradient(to bottom, #015190 0%,#014073 100%);
}
nav ul {
margin-top: 60px;
padding: 0;
float: right;
text-transform: uppercase;
}
nav ul li {
list-style: none;
float: left;
font-size:15px;
padding-right:30px;
}
nav ul li a {
display: block;
color: #fff;
text-decoration: none;
line-height: 40px;
padding: 0 20px;
font-weight: bold;
}
nav ul li a:hover {
background: linear-gradient(to bottom, #003e6d 0%,#003257 100%);
border-radius: 3px;
}

Answer 2

Please check this Fiddle: Demo
nav ul {
margin-top: 60px;
padding: 0;
float: right;
text-transform: uppercase;
}
nav ul li {
list-style: none;
float: left;
font-size:15px;
padding-right:57px;
}
nav ul li a {
display: block;
color: #000;
text-decoration: none;
padding: 10px;
/*font-weight: bold;*/
/*padding-right: 57px;*/
}
nav ul li a:hover {
background: #00335a;
color: #fff;
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
}

Answer 3

Tinkerd with the previous one from ajc, jsfiddle.net/UypRf/16/ hope this give some better insight

Answer 4

I changed the code a little, but this script generates a navbar very much like your example picture:
HTML
<div class="header">
<img src="http://us.123rf.com/400wm/400/400/antoshkaforever/antoshkaforever1105/antoshkaforever110500039/9458039-template-to-mark-the-company-put-your-company-name-rather-than-text.jpg">
<div class="nav">
<ul>
<li>Home</li>
<li>Our Company</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
CSS
body{
margin:0px;padding:0px;
}
div.header{
width:100%;
height:200px;
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000099), to(#0000AA)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00*/
background-image: linear-gradient(to bottom, #335599, #224477); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
div.header img{
margin:25px 5px;
max-height:150px;
}
div.header div.nav{
float:right;
margin-top:60px;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited{
font-family:Helvetica;
display:block;
color:#FFFFFF;
text-align:center;
padding:10px 20px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#223366;
}