如何让我的NAV文字停止移动悬停？

Question

我在悬停时在my nav links上添加了一个边框/线条，除了现在它每次将鼠标悬停在其上时都将文本向下移动。是什么原因造成的？

#nav a:hover{ 
border-top:solid 4px #3b5998; 
color:#b7c3e6; 
padding: 6px} 


.header-alignment-left.header-navigation-split #topNav{position:absolute; right:-15px} 

.logo-image #topNav nav li a{padding:5px 15px; line-height:100%} 
#nav a{border-top:0px solid transparent} 
#nav .subnav{margin-top:0} 

#nav a{border-right:1.5px solid #3b5998; height:20px} 
#nav li:last-child a{border-right:0} 

#topNav nav .folder ul li a { 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-ms-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out } 

#header #topNav nav .folder ul li{padding:0 24px 12px; position:relative; } 
#header{margin-top:20px !important} 
#topNav{margin-top:40px} 
#nav .subnav ul{padding-bottom:15px !important} 
#nav .subnav ul{padding-top:15px !important} 

Answer 1

它分配一个margin

这样的事情应该工作。

#nav a:hover{ 
border-top:solid 4px #3b5998; 
color:#b7c3e6; 
margin-top: 10px; 
padding: 6px} 

如果需要，您甚至可以使用负数margins。

您可能想要删除padding并将其替换为padding-left或padding-right，以便您不移动链接的顶部和底部。