javascript - 鼠标悬停时，CSS Navbar 下拉菜单文本向左移动

Question

我在我的博客上做了一个下拉导航栏，每次我将鼠标悬停在文本上时，它都会以最烦人的方式向左摇晃。您可以在实际中看到它 HERE .

我试过使用“position: relative;”和“position:absolute；”但是这些要么搞砸了我的导航栏，要么什么都不做，这取决于我把它们放在哪里。这是我用来制作导航栏的 CSS:

.Header h1
{
    text-shadow:2px 2px #FFFFFF;
}

/*----- MBT Drop Down Menu ----*/
#mbtnavbar
{
/* background: #8dfcf4; */
    width:100%;
    color:#8dfcf4;
    margin:0;
    padding:0;
    position:relative;
    border-top:0 solid #960100;
    height:41px;
}

#mbtnav
{
    background:#8dfcf4;
    margin:0;
    padding:0;
}

#mbtnav ul
{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}

#mbtnav li
{
    list-style:none;
    margin:0;
    padding:0;
/* border-left:1px solid #333; 
    border-right:1px solid #333; */
    height:41px;
}

#mbtnav li a,#mbtnav li a:link,#mbtnav li a:visited
{
    color:#0000;
    display:block;
    font:17px Milonga;
    margin:0;
    position:relative;
    padding:9px 23px 10px 12px;
    text-decoration:none;
}

#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;
}

#mbtnav li
{
    float:left;
    position:relative;
    padding:0;
}

#mbtnav li ul
{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:152px;
    margin:0;
    padding:0;
}

#mbtnav li ul a
{
    width:152px;
}

#mbtnav li ul ul
{
    margin:-35px 0 0 161px;
}

#mbtnav li:hover ul ul,#mbtnav li:hover ul ul ul,#mbtnav li.sfhover ul ul,#mbtnav li.sfhover ul ul ul
{
    left:-999em;
}

#mbtnav li:hover ul,#mbtnav li li:hover ul,#mbtnav li li li:hover ul,#mbtnav li.sfhover ul,#mbtnav li li.sfhover ul,#mbtnav li li li.sfhover ul
{
    left:auto;
}

#mbtnav li:hover,#mbtnav li.sfhover
{
    position:static;
}

#mbtnav li li a,#mbtnav li li a:link,#mbtnav li li a:visited
{
    background:#8dfcf4;
/* width: 140px; */
    color:#0000;
    display:block;
    font:15px Milonga;
    margin:0;
    padding:9px 12px 10px;
    text-decoration:none;
    z-index:9999;
    border-bottom:none;
}

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

.tabs-inner .widget #mbtnavbar li a
{
    border-left:none;
}

.tabs-outer .widget,.section
{
    margin:0;
}

.tabs-inner
{
    padding:0;
}

以上是对原代码的修改HERE .

如果能得到所有帮助，我将不胜感激。

Answer 1

如下更改行号 (616) 上的 :hover 代码:

#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