模仿新浪导航栏

1.效果
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    .nav{
        height: 41px;
        background-color: #fcfcfc;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
    }
    .nav a {
        line-height: 41px;
        height: 41px;
        display: inline-block;
        text-decoration: none;
        font-size: 12px;
        padding:0 20px;
        color:#4c4c4c;
    }
    .nav a:hover {
        background-color: #eee;
        color:#ff8400;
    }
</style>
<body>
    <div class="nav">
            <a href="#">设为首页</a>
            <a href="#">手机新浪网</a>
            <a href="#">移动客户端</a>
            <a href="#">登录</a>
            <a href="#">微博</a>
            <a href="#">博客</a>
            <a href="#">邮箱</a>
            <a href="#">网站导航</a>
    </div>
</body>
</html>