CSS href text link jumps to a new line when clicked - css

Question

My navigation bar works perfectly fine, any image links work fine, but all text links on my page jump down when I click on them. Most of them jump so far you cannot actually click it.
I also noticed my a:visited links are inheriting the color #000 from somewhere, when they should be #616161. There is no issue when browsing on my Android device, but happens in IE11 and Chrome32.
The HTML is nothing special. Just
Page Name
type links. It has to be something with the CSS.
The 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

It's because you are adding padding to the element when it is :active:
#menu ul a:hover, a:active {
display: block;
padding: 5px;
text-decoration: none;
color: #fff;
}
It's worth noting that you are repeating the same styling in different instances.
#menu a:hover, a:active {
display: block;
padding: 5px;
text-decoration: none;
color: #fff;
}
Just remove the padding from both declarations and it will work as expected.