导航栏怎么怎么保持选中一个，hover移动到a上之效果怎么离字体远点

Question

 怎么达到这种效果

我的鼠标移动到上面之后是从上面慢慢下来的，而且贴着字体

代码

<div class="header">
            <div class="header_logo" center><a href="#"><img src="image/logo.png" ></a></div>
            <div class="header_message"></div>
            <div class="headder_phone"><p>400-1234-789</p></div>
            <div class="nav">
                    <a href="#">首页</a>
                    <a href="#">走进沈小福</a>    
                    <a href="#">产品中心</a>    
                    <a href="#">加盟合作</a>    
                    <a href="#">新闻中心</a>    
                    <a href="#">联系我们</a>        
            </div>
        </div>

body{
    background: #646464;
}
.header{
    height: 88px;
    width: 100%;
    position: fixed;
    z-index: 99999;
    background: #ffff7f;
}

.header_logo{
    float: left;
    height: 60px;
    margin-left: 100px;
    margin-top: 12px;
}
.nav{
    height: 40px;
    float: left;
    margin-left: 650px;
    margin-top: 30px;
    font-size: 16px;
}

.nav a{
    margin-right: 50px;
    transition: .1s;
}
.nav a:hover{
    color:#00ff7f;
    background: url(../image/header_Icon.jpg) no-repeat bottom;
    
}

.headder_phone{
    height: 30px;
    width: 140px;
    float: right;
    background: url(../image/phone%20.png)no-repeat;
    margin-top: 28px;
    margin-right:50px;
}
.headder_phone p{
    margin-left: 40px;
}
.header_message{
    width: 30px;
    height: 30px;
    float: right;
    background: url(../image/message.png)no-repeat;
    margin-top: 25px;
    margin-right:100px;
}

Answer 1

试下在 .nav a 样式类里，加一个内边距如 padding:10px