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

只需從兩個聲明中刪除填充，它將按預期工作。