Question

我是UI用户界面设计师和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>

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

请检查此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 2

这个怎么样？

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 3

来自ajc，jsfiddle.net/UypRf/16/的前一个Tinkerd希望这能提供更好的见解

Answer 4

我稍微修改了一下代码，但是这个脚本会生成一个非常类似于示例图片的导航栏：

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

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

如何使导航悬停为背景

4 个答案: