Hi,
ich habe damit begonnen meine erste eigene Seite zu programmieren. Konnte bereits auch schon viele Hürden überwinden. Aber seit 2 Tagen bin ich am verzweifeln. Ich finde weder meinen Fehler noch bin ich in der Lage eine alternative Lösung zu finden. (Sicher es wäre möglich ein anderes Navigationsmenü zu nutzen, aber das würde mich innerlich stören...) Deswegen frage ich euch um Rat.
Ich möchte ein horizontales Navigationsmenü programmieren, dessen Unterpunkte beim hovern nach unten aufklappen. Soweit sogut Menü steht, jedoch funktioniert das aufklappen nicht. Kann jemand erkenn worin der Fehler liegt?
html-datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Bujinkan Budo Wiki</title>
<meta name="description" content="Kurzbeschreibung">
<link href="design.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> Bujinkan Budo Wiki </h1></div>
<div id="nav">
<ul class="nav">
<li><a href="lexikon.htm"> Lexikon </a></li>
<ul>
<li><a> Lexikon 1 </a></li>
<li><a> Lexikon 2 </a></li>
</ul>
<li><a href="lernquiz.htm"> Lernquiz </a></li>
<ul>
<li><a> Quiz 1 </a></li>
<li><a> Quiz 2 </a></li>
</ul>
<li><a href="theorie.htm"> Theorie </a></li>
<li><a href="shop.htm"> Shop </a></li>
</ul></div>
<div id="content"> <p> Willkommen im Wiki des Bujinkan Budo. Diese Seite soll euch einen Überblick über die Theorie des Bujinkan Budo geben und helfen diese zu lernen und zu verstehen. In <b>keinem Fall</b> kann und soll sie das Training unter einem Trainer ersetzen!</p> <p> Meine Motivation diese Seite zu entwerfen, lag darin, dass ich selbst immer Probleme dabei hatte, alle Unterlagen zusammen zubekommen und immer auf der Suche nach einer kompakten und übersichtlichen Sammlung aller Techniken und Begriffe war. Sollten euch Fehler auffallen, Techniken fehlen oder ihr Anregungen haben die Seite besser zu gestalten, meldet euch einfach bei mir.</p> </div>
<div id="footer">Fußzeile</div>
</div>
</body>
</html>
Alles anzeigen
css:
body {
background: url(ninja2.jpg) no-repeat;
background-size: cover;
font-family: Arial;
color: black;
}
header,
nav,
footer {
display:block;
}
body {
background-color: grey;
}
h1 {
color: red;
background-color: black;
border-color: green;
border-width: 5px;
border-style: groove;}
#wrapper {
max-width: 960px;
margin: 0px auto;
margin-top: 20px;
padding: 20px;
}
#header {
width: 100%;
height: 100px;
margin-bottom: 20px;
text-align: center;
}
#nav{ width: 100%;
height: 50px;
}
#content { width: 100%;
height: 600px;
margin-bottom: 10px;
}
#footer {
width:100%;
height: 50px;
clear: both;
}
.nav {
margin: 0px;
padding: 0px;
list-style: none;
}
.nav li {
float: left;
width: 240px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align:center;
font-size: 20px;
}
.nav li a {
text-decoration: none;
color: white;
display: block;
}
.nav li a:hover {
background-color: red;
}
.nav ul li {
display: none;
}
.nav li:hover ul li {
display: block;
}
.nav ul {
position: absolute;
margin-top: 40px;
}
Alles anzeigen
noch eine kleine sache im anschluss: sobald ich versuche mein hintergrund bild in einen ordner zupacken und mit "background: url(bilder/ninja2.jpg) no-repeat;" daraif verlinken möchte findet er es nichtmehr. Wo liegt da der Fehler?
Ich danke euch schon einmal im voraus. 
LG
Ben
