我在顶部导航栏“image4”上有最后一个链接，它出现在所有页脚上。因此，我将鼠标悬停在页脚上的最后一个 <li> 的超链接上。元素想要触发。
出于某种原因，它看起来像 image4 链接一直到页脚。如果我删除 image4 <li> item，image3 是可以从页脚中的任何位置触发的新链接。
我该如何解决？
我的代码如下:
HTML:
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /></li>
<li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></li>
<li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></li>
<li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></li>
</ul>
</div><!-- end of the nav -->
<div id="content">
<img alt="#" class="image5" src="image5.png" />
<img alt="#" class="image6" src="image6.png" />
</div><!-- end of the content -->
</div><!-- end of the wrapper -->
</body>
<footer>
<img class="logo" alt="#" src="logo.png" />
<p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
background: url('images/bg.png') repeat-x;
background-color: #ffffeb;
}
#nav {
float: left;
width: 1024px;
height: 732px;
display: block;
margin: 5px 0 0 200px;
}
ul {
list-style: none;
width: 420px;
margin: 0 auto;
}
li {
float: left;
}
.image5 {
position: absolute;
top: 0px;
left: 200px;
z-index: -1;
}
.image6 {
position: absolute;
top: 375px;
left: 200px;
z-index: -1;
}
footer {
height: 30px;
position: relative;
top: 715px;
}
.logo {
position: absolute;
left: 230px;
top: 0px;
}
p {
font-family: helvetica, arial, sans serif;
font-size: 12px;
color: #aaaaaa;
text-decoration: none;
position: absolute;
left: 940px;
top: 0px;
padding: 5px;
}
最佳答案
<head>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /> </a></li>
<li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></a></li>
<li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></a></li>
<li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></a></li>
</ul>
</div><!-- end of the nav -->
<div id="content">
<img alt="#" class="image5" src="image5.png" />
<img alt="#" class="image6" src="image6.png" />
</div><!-- end of the content -->
<footer>
<img class="logo" alt="#" src="logo.png" />
<p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>
</div><!-- end of the wrapper -->
</body>
</html>
关于html - 列表链接出现在页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11830421/