Css 如何使导航悬停为背景

我是UI UX设计师，也是CSS和HTML5的大学习者，我正在做一些练习，但只停留在一件事上：

以下是我希望构建的屏幕截图：

（鼠标悬停效果）

HTML

<nav>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Our Company</a></li>
         <li><a href="#">Services</a></li>
         <li><a href="#">Contact Us</a></li>
    </ul>

</nav>

请检查这个

这个怎么样

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;
}

---

修改ajc的上一个脚本，jsfiddle.net/UypRf/16/希望这能提供更好的理解力

我对代码做了一些修改，但此脚本生成的导航栏与示例图片非常相似：

HTML

---

希望有个好的开始@ajc可能想把它作为一个答案发布，这样它就可以被接受了。谢谢，让我检查一下，但我想要一个圆的！谢谢让我查一查。我是stackoverflow的新手，所以花时间：（哇，这真的很有效，但我有一个问题（因为我是css新手），为什么我们要给出NAV的高度？这是我做的html（旧的一个）哇，我删除了UL的高度，它仍然在工作！非常感谢你们Schoenwaldnils！感谢你们所有人！谢谢。让我检查dreamweaver。非常感谢你们的努力和时间，非常感谢。但我在相同的威胁下得到了相同的其他解决方案。再次，非常感谢：）没问题。很高兴能为您提供帮助。非常感谢您的时间，ajc，非常感谢！我不知道我会在几分钟内得到许多解决方案。：）再次感谢

    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;
}

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;
}

<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><a href="#">Home</a></li>
<li><a href="#">Our Company</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

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;
}