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

【问题标题】：CSS Navbar dropdown menu text moves to the left when mousing over鼠标悬停时 CSS Navbar 下拉菜单文本向左移动
【发布时间】：2014-02-10 21:59:21
【问题描述】：

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

我尝试过使用“位置：相对；”和“位置：绝对；”但这些要么搞砸了我的导航栏，要么根本不做任何事情，这取决于我放置它们的位置。这是我用来制作导航栏的 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的修改代码。

我将不胜感激。

【问题讨论】：

标签： javascript html css navbar absolute

【解决方案1】：

如下更改您的:hover 代码行号 (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

【讨论】：

【解决方案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;  */
}

【讨论】：

【解决方案3】：

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

【讨论】：