所以我为我的实习工作建立了一个网站（我学习的第一年因此缺乏经验）。可悲的是，我遇到了除firefox以外的所有浏览器都能解决的问题。 firefox的问题在于没有任何效果。没有任何菜单真正链接任何东西。 ****
我想知道是否有人可以帮我解决问题，经过无数个小时的尝试自己解决问题。
所以我在下面发布的网站上使用了Html，css和一些javascript。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="tartufi.css" media="screen"/>
<title>xxxxxx</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Karla:700' rel='stylesheet' type='text/css'/>
</head>
<body>
<p> </p>
<div class="header">
</div>
<div class="alpha">
<div class="headermenu">
<div class="logo">
</div>
<nav>
<ul id="navigation">
<li><div class="navSection "><a id="nav1" href="">HOME</a> </div></li>
<li><div class="navSection "><a id="nav2" href="">PASSION</a> </div></li>
<li><div class="navSection "><a id="nav3" href="">CONTACT</a> </div></li>
</ul>
</nav>
<div class="talen">
<a href="index.html"><img style="border:0;" src="nederlands.png" alt="English" /></a>
<a href="index_en.html"><img style="border:0;" src="english.png" alt="English" /></a>
<a href="index_du.html"><img style="border:0;" src="deutsch.png" alt="Deutsch" /></a>
</div>
</div>
<div class="content">
<article class="content">
<section id="s1">
<div id="services" class="f">
</div>
</section>
<section id="s2">
<div id="services2" class="b">
<div class="tekstcontent">
</div>
<div class="imagecontent">
</div>
</div>
</section>
<section id="s3">
<div id="services3" class="c">
<div class="contact">
person lastname <br/>
street<br/>
postal code<br/><br/>
<img src="streep.png" alt="" /><br/><br/>
<img src="tel.png" alt=""/>
phone <br/><br/>
<img src="fax.png" alt="" >
fax<br/><br/>
<img src="email.png" alt="" align="center">
<a href="mailto:xxxx@xxxxxxxx" class="contactlink">xxxx@xxxxxxxx</a>
</div>
<div class="imagecontent">
</div>
</div>
</section>
</article>
</div>
<div class="footer">
Copyright © 2014.
<a href="http://www.xxxxx.xxxx/" target="_blank" style="color:grey;">xxxx xxxx xxxxxx</a>
</div>
</div>
</body>
</html>
我的css
body {
background-color: black;
background-image:url("background.jpeg");
background-size: 1300px 768px;
background-repeat:no-repeat;
background-position: top;
}
.alpha {
width: 1300px;
height: 768px;
margin-left: auto;
margin-right: auto;
margin-top: -55px;
position:relative;
}
.header {
width: 100.9% ;
margin-left: -5px;
height: 100px;
margin-top: -55px;
background-color:white;
opacity: 0.4;
float: left;
}
.headermenu {
width: 1300px;
height: 120px;
margin-left:auto;
margin-right:auto;
position: absolute;
}
.logo {
width:263px;
height:350px;
position:relative;
background-image:url("LOGO.png");
background-size:100%;
color:green;
float:left;
background-repeat:no-repeat;
}
.imagecontent {
width:1300px;
height:648px;
position:relative;
background-image:url("bgcontent.png");
margin-left: 600px;
background-repeat:no-repeat;
}
.tekstcontent {
width:435px;
height:120px;
position:relative;
background-color:#D6D6D6;
float:left;
margin-left: 263px;
margin-top: 120px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 20px;
}
.contact {
width:400px;
height:400px;
font-family:Candara;
position:relative;
float:left;
margin-left: 320px;
margin-top: 70px;
z-index:2;
padding: 10px ;
font-size: 30px ;
text-align: middle;
}
.content {
width:1300px;
height:648px;
overflow: hidden;
}
.f {
Width:1300px;
height:648px;
opacity:0;
}
.b {
Width:1300px;
height: 648px;
background-color: white;
}
.c {
Width:1300px;
height: 648px;
background-color: white;
}
.talen {
height:120px;
width:300px;
padding-left: 70px;
float:left;
}
.footer {
width:1300px;
height:23px;
background-color:#000000;
color:grey;
text-align:center;
}
/*nav*/
ul#navigation {
list-style:none;
position:relative;
top:-15px;
}
ul#navigation li {
float:left;
margin-left:20px;
margin-right:-20px;
}
ul#navigation li a {
display:block;
padding:30.5px 30px;
text-decoration:none;
color:black;
font-size: 33px;
margin-left:10px;
font-family: 'Karla', sans-serif;
font
}
ul#navigation li a:hover{
background-color: #c62126;
}
/* page styles */
a {
color: red;
}
和我的js
// kadaj Oct 2012
$(document).ready(function () {
$('.navSection').on('click', function (e) {
debugger;
var elemId = ""; //eg: #nav2
switch (e.target.id) {
case "nav1":
elemId = "#s1";
break;
case "nav2":
elemId = "#s2";
break;
case "nav3":
elemId = "#s3";
break;
case "nav4":
elemId = "#s4";
break;
}
$('.content').animate({
scrollTop: $(elemId).parent().scrollTop() + $(elemId).offset().top - $(elemId).parent().offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
//console.log("animation completed");
}
});
e.preventDefault();
});
});
非常感谢任何帮助
答案 0 :(得分：0)
您的<div class="header"></div>位于您的div前面，导航，因此您无法点击导航div内的任何内容。
将css添加到.headermenu：
.headermenu{
//what you had before
z-index: 999;
}
更高的z-index会带来任何带有它的元素（或带有z-index的元素）在z-index较低的其他任何元素前面（我认为默认值为1）。
答案 1 :(得分：0)
根据当前代码，将以下代码放在CSS文件的末尾。它将在Firefox中运行。使用Fiddler进行测试。
#navigation
{
z-index: 1000;
}