Javascript CSS导航栏下拉菜单文本在鼠标悬停时向左移动

我在我的博客上做了一个下拉导航栏，每次我把鼠标移到文本上，它都会以最烦人的方式向左抖动。你可以在行动中看到它

我尝试过使用“位置：相对”和“位置：绝对”，但它们要么极大地破坏了导航栏，要么根本不做任何事情，这取决于我放置它们的位置。以下是我用来制作导航栏的CSS：

.Header h1
{
文本阴影：2px2px#FFFFFF；
}
/*-----MBT下拉菜单----*/
#mbtnavbar
{
/*背景：#8dfcf4*/
宽度：100%；
颜色：#8dfcf4；
保证金：0；
填充：0；
位置：相对位置；
边框顶部：0实心#960100；
高度：41px；
}
#mbtnav
{
背景：#8dfcf4；
保证金：0；
填充：0；
}
#mbtnav ul
{
浮动：左；
列表样式：无；
保证金：0；
填充：0；
}
#李明博
{
列表样式：无；
保证金：0；
填充：0；
/*左边框：1px实心#333；
右边框：1px实心#333*/
高度：41px；
}
#李安，#李安：链接，#李安：访问
{
颜色：#0000；
显示：块；
字体：17px米隆加；
保证金：0；
位置：相对位置；
填充：9px 23px 10px 12px；
文字装饰：无；
}
#mbtnav li a:悬停，#mbtnav li a:活动
{
背景：#03a29b；
颜色：#FFF；
显示：块；
文字装饰：无；
保证金：0；
位置：相对位置；
填充：9px 12px 10px；
}
#李明博
{
浮动：左；
位置：相对位置；
填充：0；
}
#李安
{
z指数：9999；
位置：绝对位置；
左：-999em；
高度：自动；
宽度：152px；
保证金：0；
填充：0；
}
#李乌拉先生
{
宽度：152px；
}
#李乌尔
{
利润率：-35px 0 161px；
}
#mbtnav li:悬停ul，#mbtnav li:悬停ul，#mbtnav li.sfhover ul，#mbtnav li.sfhover ul
{
左：-999em；
}
#mbtnav li:hover ul，mbtnav li li:hover ul，mbtnav li li:hover ul，mbtnav li.sfhover ul，mbtnav li.sfhover ul，mbtnav li li.sfhover ul，mbtnav li li.sfhover ul
{
左：自动；
}
#mbtnav li:悬停，#mbtnav li.sfhover
{
位置：静态；
}
#mbtnav li a，#mbtnav li a:链接，#mbtnav li a:访问
{
背景：#8dfcf4；
/*宽度：140px*/
颜色：#0000；
显示：块；
字体：15px米隆加；
保证金：0；
填充：9px 12px 10px；
文字装饰：无；
z指数：9999；
边框底部：无；
}
#mbtnav li a:悬停，#mbtnavli a:活动
{
背景：#03a29b；
颜色：#FFF；
显示：块；
保证金：0；
填充：9px 12px 10px；
文字装饰：无；
}
.tabs内部.widget#mbtnavbar li a
{
左边界：无；
}
.tabs外部.widget.部分
{
保证金：0；
}
.内标签
{
填充：0；
}

以上是原代码的修改代码

---

我将非常感谢能得到的所有帮助。

将您的：悬停代码更改为第616行，如下所示：

#mbtnav li a:hover, #mbtnav li a:active { 
background: #03a29b; 
color: #FFF; 
display: block; 
text-decoration: none; 
margin: 0; 
position: relative; 
}

---

它向左移动是因为您正在将填充从

9px 23px 10px 12px

更改为

9px 12px 10px 12px

问题在于减少悬停时锚定标记的填充

#mbtnav li a:hover, #mbtnav li a:active { 
background: #03a29b; 
color: #FFF; 
display: block; 
text-decoration: none; 
margin: 0; 
position: relative; 
/* padding: 9px 12px 10px 12px;  */
} 

---

当前悬停的CSS为：

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    display: block;
    font: 17px Milonga;
    margin: 0;
    padding: 9px 23px 10px 12px;
    position: relative;
    text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: none repeat scroll 0 0 #03A29B;
    color: #FFFFFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px;   <------- YOU CHANGED PADDING HERE
    position: relative;
    text-decoration: none;
}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    display: block;
    font: 17px Milonga;
    margin: 0;
    padding: 9px 23px 10px 12px;
    position: relative;
    text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: none repeat scroll 0 0 #03A29B;
    color: #FFFFFF;
    display: block;
    margin: 0;
    padding: 9px 23px 10px 12px;
    position: relative;
    text-decoration: none;
}