我的导航栏工作得非常好,任何图片链接都可以正常工作,但是当我点击它们时,我页面上的所有文字链接都会跳转。他们中的大多数跳到目前为止你无法实际点击它。
我还注意到我的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;
}
答案 0 :(得分: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;
}
只需从两个声明中删除填充,它就会按预期工作。