这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<style>
.header {
color: white;
font-family: 'Inconsolata', monospace;
font-size: 32px;
text-align: center;
margin: 2px;
font-weight: bold;
}
.header2 {
color: white;
font-family: 'Dancing Script', cursive;
font-size:16px;
top:-35%;
left:-42%;
position:relative;
}
body {
background-image:url('bk.jpg');
font-family: helvetica, arial, serif;
background-size: cover;
font-size: 13px;
text-transform: uppercase;
text-align: center;
width:100%;
height:100%;
}
html {
width:100%;
height:100%;
}
.wrap {
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 40px;
}
a {
text-decoration: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
letter-spacing: 2px;
text-shadow: 1px 1px 1px #0E0E0E;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 80px;
left:-8px;
display:inline-block;
}
ul.primary li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #3D3D3D;
}
ul.primary li:last-child a {
border-right:none;
}
ul.primary li a:hover {
color: #000;
}
ul.sub {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 15%;
display:none;
}
ul.sub li {
float: none;
margin: 0;
}
ul.sub li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 20px 20px;
}
ul.sub li:last-child a {
border-bottom: none;
}
ul.sub li a:hover {
color: #000;
background: #eeeeee;
}
ul.sub2 {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 15%;
display:none;
}
ul.sub2 li {
float: none;
margin: 0;
}
ul.sub2 li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 15px;
}
ul.sub2 li:last-child a {
border-bottom: none;
}
ul.sub2 li a:hover {
color: #000;
background: #eeeeee;
}
ul.primary li:hover ul {
display: block;
background: #fff;
}
ul.primary li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.primary li:hover > a{
color: #000;
}
@media only screen and (max-width: 600px) {
.decor {
padding: 3px;
}
.wrap {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.primary li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
text-decoration: underline;
}
ul.primary li:hover ul {
display: block;
background: #272727;
color: #fff;
text-decoration: underline;
}
ul.sub {
display: block;
position: static;
box-shadow: none;
width: 100%;
text-decoration: underline;
}
ul.sub li a {
background: #272727;
border: none;
color: #8B8B8B;
text-decoration: underline;
}
ul.sub li a:hover {
color: #ccc;
background: none;
text-decoration: underline;
}
ul.sub2 {
display: block;
position: static;
box-shadow: none;
width: 100%;
text-decoration: underline;
}
ul.sub2 li a {
background: #272727;
border: none;
color: #8B8B8B;
text-decoration: underline;
}
ul.sub2 li a:hover {
color: #ccc;
background: none;
text-decoration: underline;
}
.button {
border: 3px solid #FF4A00;
padding: 7px 16px;
cursor: pointer;
color:white;
font-weight: bold;
border-radius: 1em;
background-color: transparent;
transition: 0.2s;
}
.button:hover {
background-color: #FF4A00;
}
.LeftFloatAds{
left:-80%;
position: fixed;
text-align: left;
top: 0px;
}
.RightFloatAds{
right: 0px;
position: fixed;
text-align: center;
top: 0px;
}
.adBottom {
left: 0px;
position: fixed;
text-align:center;
bottom: 0px;
width:100%;
z-index:999;
}
</head>
</style>
<body>
<nav>
<ul class="primary">
<li>
<a href="index.html">Hjem</a>
<ul class="sub2">
</ul>
</li>
<li>
<a href="">Om meg</a>
<ul class="sub2">
<li><a href="">Min Biografi</a></li>
</ul>
</li>
<li>
<a href="">Mine interesser</a>
<ul class="sub2">
<li><a href="">Gaming</a></li>
<li><a href="">Anime</a></li>
<li><a href="">Dank memes</a></li>
</ul>
</li>
<li>
<a href="">Min fremtid</a>
<ul class="sub2">
<li><a href="">Juss</a>
</ul>
<li>
<a href="mineoppgaver.html">Mine Oppgaver</a>
<ul class="sub">
</ul>
</li>
<li>
<a href="">Kontakt meg</a>
<ul class="sub2">
<li><a href="https://www.facebook.com/ridallah.halabi" target="_blank">
<input type="image" src="./fb.png" value="submit" width="50" height="50">
</a>
</li>
<li><a href="http://steamcommunity.com/id/GlowsyJR" target="_blank">
<input type="image" src="./steam.png" value="submit" width="48" height="48">
</a>
</li>
<li><a href="https://www.snapchat.com/add/rida-00" target="_blank">
<input type="image" src="./snap.png" value="submit" width="70" height="70">
</a>
</li>
<li><a href="https://twitter.com/GlowsyJr" target="_blank">
<input type="image" src="./twitter.png" value="submit" width="50" height="50">
</a>
</li>
<li><a href="index.html">
<input type="image" src="./ring.png" value="submit" width="120" height="70">
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="header">
<h1><b>Velkommen til min side!</b></h1>
</div>
<audio autoplay="true" src="skrra.mp3" hidden="true">
</audio>
<div class="header2">
<h1><b>Rida Halabi</b></h1>
</div>
<div id=".adBottom" style="bottom:150px;position: fixed; text-align: center; top: 100px;"> <script type="text/javascript">
<script type="text/javascript">
atOptions = {
'key' : 'e0e18baa700c8ab07e64e121d8070fce',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnserving.com/e0e18baa700c8ab07e64e121d8070fce/invoke.js"></scr' + 'ipt>');
</script>
</div>
<div id="RightFloatAds" style="right: 0px; position: fixed; text-align: center; top: 100px;"> <script type="text/javascript">
atOptions = {
'key' : 'b9f9e2b2af5e4716138c8fe4f97c0905',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnserving.com/b9f9e2b2af5e4716138c8fe4f97c0905/invoke.js"></scr' + 'ipt>');
</script>
</div>
<div id="LeftFloatAds" style="left: 0px; position: fixed; text-align: center; top: 100px;"> <script type="text/javascript">
atOptions = {
'key' : 'b9f9e2b2af5e4716138c8fe4f97c0905',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnserving.com/b9f9e2b2af5e4716138c8fe4f97c0905/invoke.js"></scr' + 'ipt>');
</script>
</div>
</body>
</html>我的网站:http://ridallah.informatikk5.net/
我遇到的问题是，要按下像“Hjem”(主页)这样的按钮，我必须按下顶部或底部的一个小空间。虽然右侧的最后一个按钮工作正常，但这是为什么呢？如果您发现任何其他错误，我很想知道。
最佳答案
你的 <div class="header2">内部带有 h1 的 block 部分覆盖/遮挡了您的导航。为每个添加一个 z-index，你应该解决你的问题:
.header2 {
z-index: 1;
}
nav {
z-index: 2;
}
关于html - 为什么我不能按导航栏按钮上的任意位置来打开导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47051084/