我是 UI UX 设计师和 CSS 和 HTML5 的大学习者,我正在做一些练习,但坚持一件事:
这是我希望构建的屏幕截图:
http://goo.gl/RK5i0y (鼠标悬停效果)
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;
}