Question

我在我的博客上做了一个下拉导航栏，每当我将鼠标放在文本上时，它就会以最烦人的方式向左摇晃。您可以在行动HERE中看到它。

我尝试过使用“position：relative;”和“位置：绝对;”但这些要么搞砸我的导航棒，要么根本不做任何事情，这取决于我放置它们的位置。这是我用来制作导航栏的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）上更改您的：悬停代码，如下所示：

#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

，因此向左移动

Answer 2

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

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

Answer 3

您当前的Hover 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;
}

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

3 个答案: