CSS href文本链接点击时跳转到新行

Question

我的导航栏工作得很好，任何图片链接都可以正常工作，但是当我点击它们时，我的页面上的所有文本链接都会跳下来。他们中的大多数跳到目前为止您无法真正点击它。

我也注意到我的a:visited链接从某处继承颜色#000，当它们应该是#616161。在我的Android设备上浏览时没有问题，但发生在IE11和Chrome32中。

HTML没什么特别的。只是

<a href="/page-name.html">Page Name</a> 

类型的链接。它必须是CSS的东西。

的CSS：

body { 
    background-color: #7296d9; 
    max-width:1000px; 
} 
#wrapper { 
    width:auto; 
    background:url(../images/bg.jpg); 
    background-repeat:repeat; 
    margin:4px; 
} 
#content { 
    width:98%; 
    text-align:center; 
    margin:auto; 
} 
#paragraph { 
    width:80%; 
    font-size:18px; 
    color: #666; 
    font-weight:100; 
    text-align:justify; 
    margin:10px auto 25px auto; 
} 
.reviews { 
    width:80%; 
    margin:auto; 
    text-align:justify; 
    color: #666; 
} 
p { 
    margin:10px 0 10px 0; 
} 
h1 { 
    line-height:48px; 
    font-size:36px; 
    font-weight:bold; 
    text-align:center; 
    margin-top:10px; 
} 
h2 { 
    line-height:42px; 
    font-size:24px; 
    font-weight:bold; 
    text-align:center; 
} 
a:link, a:visited { 
    color:  #616161; 
    text-decoration: underline; 
} 
a:hover, a:active { 
    color:  #ffffff; 
    text-decoration: underline; 
} 
#header { 
    height:86px; 
    max-height:86px; 
    width:98%; 
    min-width:500px; 
    position:relative; 
    background-image:url(../images/logo.png); 
    background-repeat:no-repeat; 
} 
#header .left { 
    float:left; 
    height:auto; 
} 
#header .media-header { 
    float:right; 
    margin-top:50px; 
    margin-right:-20px; 
} 
#menu ul li:hover > ul { 
    display: block; 
} 
#menu { 
    display:table; 
    width:100%;   
    background: -webkit-linear-gradient( #d5d5d5,  #595959); /* For Safari */ 
    background: -o-linear-gradient( #d5d5d5,  #595959); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient( #d5d5d5,  #595959); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient( #d5d5d5,  #595959); /* Standard syntax */ 
    -webkit-border-radius: 25px; 
    -o-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
} 
#menu ul ul { 
    display: none; 
} 
#menu ul { 
    height:auto; 
    font-size: 16px; 
    font-family: "Times New Roman", Times, serif; 
    font-weight: bold; 
    text-align: center; 
    text-shadow: 2px 2px 2px  #cccccc; 
    text-decoration:none; 
    list-style: none; 
    position: relative; 
    display: table-row; 
} 
#menu a:link, a:visited { 
    display:block; 
    text-decoration: none; 
    color:  #000000; 
    padding: 8px auto 8px auto; 
} 
#menu a:hover, a:active { 
    display:block; 
    padding:5px; 
    text-decoration:none; 
    color:  #fff; 
} 
#menu ul:after { 
    content: ""; 
    clear:both; 
    display: block; 
} 
#menu ul li { 
    display:table-cell; 
    width:auto; 
} 
#menu ul a:link, a:visited { 
    display: block; 
    padding: 5px; 
    color: #000; 
    text-decoration: none; 
} 
#menu ul a:hover, a:active { 
    display:block; 
    padding:5px; 
    text-decoration:none; 
    color:  #fff; 
} 
#menu ul ul { 
    background:  #999; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
} 
#menu ul ul li { 
    width:auto; 
    border-top: 1px solid  #ccc; 
    position: relative; 
    display:block; 
} 
#menu ul ul li a { 
    padding: 5px; 
    text-align:left; 
    color: #000; 
}   
#menu ul ul li a:hover { 
    color: #FFF; 
} 
#menu ul ul:last-child, nav ul ul:last-child a { 
    -webkit-border-bottom-right-radius: 10px; 
    -o-border-bottom-right-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    border-bottom-right-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -o-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-left-radius: 10px; 
} 
.center { 
    text-align:center; 
} 
#reviews { 
    width:80%; 
    text-align:justify; 
    overflow:hidden; 
    margin:25px auto 25px auto; 
} 
#reviews img { 
    position:relative; 
    float:left; 
} 
#form { 
    color: #666; 
    margin:0px auto 0px auto; 
    width:350px; 
} 
#form p { 
    color: #666; 
    margin:0px auto 0px auto; 
    width:350px; 
} 
.bottombar { 
    margin:auto; 
    width:100%; 
} 
#footer { 
    display:block; 
    font-size:12px; 
    color: #616161; 
    text-align:center; 
    width:auto; 
    margin:5px auto 5px auto; 
} 
#footer img { 
    text-align:center; 
    color: #616161; 
    width:100%; 
    margin:5px auto 5px auto; 
} 
#media-footer { 
    text-align:center; 
    margin:10px 0 15px 55px; 
} 
#media-footer img { 
    text-align:center; 
    margin:10px 0 15px 55px; 
} 
nav ul { 
    display:none; 
} 
#minimenu { 
    display:none; 
} 

Answer 1

这是因为要添加填充到元素时，它是:active：

#menu ul a:hover, a:active { 
    display: block; 
    padding: 5px; 
    text-decoration: none; 
    color: #fff; 
} 

值得一提的是，你正在重复在不同的情况下，同样的造型。

#menu a:hover, a:active { 
    display: block; 
    padding: 5px; 
    text-decoration: none; 
    color: #fff; 
} 

只需从两个声明中删除填充，它将按预期工作。