Huhu!
So, also hier wäre mein Code fürs HTML und dann das Stylesheet mit der CSS Datei..Also die Seite wird an sich ganz nett angezeigt, allerdings wird das Menü erstens über meinem Hintergrund angezeigt! (also nicht darübergelegt, sondern bevor das Bild anfängt, beginnt die Leiste horizontal..und zweitens öffnet sich kein weiteres Menü, wenn ich drüberfahre.. irgendwie blicke ich nicht mehr durch, ob was fehlt oder ob ich einen gravierenden Fehler irgendwo begangen habe. Möchte ja erstmal so dieses Beispiel, wie es auf der Website gezeigt wird. Habe jetzt halt beispielsweise ein paar HTM Dateien für die Seiten "fotobereich.htm, natur.htm, insekten.htm, panoramen.htm, grafiken.htm, ort1-4.htm etc." erstellt.. also ganz einfache Seiten, wollte nur mal schauen, ob er mich überhaupt weiterleitet, aber es öffnet sich kein weiteres Menü dazu :-( Es bleiben nur diese Oberpunkte stehen..
<html>
<head>
<title>Meine kleine Fotowelt</title>
<meta charset="UTF-8" />
<link href="css3-text-shadow.css"
type="text/css" rel="stylesheet" />
<meta charset="utf-8">
<title>CSS3 Dropdown Menu von designyourweb.info</title>
<link rel="stylesheet" href="menue.css">
<style>
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 20pt;
color: #cccccc;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #888888;
text-decoration: underline;
}
</style>
<style>
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
</style>
<style>
#hintergrund {
position:absolute;
width:100%;
height:100%;
z-index:1;
}
#scrollbereich {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:2;
#inhalt {
padding:20px 100px 30px 200px;
z-index:2;
}
</style>
</head>
<body bgcolor="#ffffff">
<nav>
<ul>
<li class = "cat1">
<a href="index.htm">Home</a>
</li>
<li class = "cat2">
<a href="fotobereich.htm">Fotobereiche</a>
<ul>
<li><a href="natur.htm">Natur</a></li>
<li><a href="insekten.htm">Insekten</a></li>
<li><a href="panoramen.htm">Panoramen</a></li>
<li><a href="grafiken.htm">Grafiken</a></li>
</ul>
</li>
<li class = "cat3">
<a href="orte.htm">Orte</a>
<ul>
<li><a href="ort1.htm">Düsseldorf</a></li>
<li><a href="ort2.htm">Berlin</a></li>
<li><a href="ort3.htm">Hamburg</a></li>
<li><a href="ort4.htm">Köln</a></li>
</ul>
</li>
<li class = "cat4">
<a href="Flyer">Referenzen</a>
<ul>
<li><a href="makrofotografie.htm">Flyer zur Makrofotografie</a></li>
<li><a href="blumen.htm">Flyer für Blumenladen</a></li>
</ul>
</li>
<li class = "cat5">
<a href="#">Kontakt</a>
<ul>
<li><a href="adresse.htm">Adresse</a></li>
<li><a href="kontaktformular.htm">Kontaktformular</a></li>
</ul>
</li>
</ul>
</nav>
<div>
<img id="hintergrund" src="gras.jpg" alt="Gräser" />
</div>
<div id="scrollbereich">
<div id="inhalt">
<h1> GUTEN TAG! </h1>
</div>
</div>
</body>
</html>
Und die CSS Datei:
nav {
width: 960px;
}
nav ul {
padding: 0px;
margin: 0px;
box-shadow: 2px 2px 2px #dfdfdf;
-moz-box-shadow: 2px 2px 2px #dfdfdf;
-webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul,nav ul li{
background-color: #FAFAFA;
}
nav ul li {
list-style: none;
float:left;
border-right: 1px solid #dfdfdf;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
-webkit-transition: background 0.3s ease-out 0s;
-moz-transition: background 0.3s ease-out 0s;
-o-transition: background 0.3s ease-out 0s;
transition: background 0.3s ease-out 0s;
}
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a {
background-color: #E6DD00;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a {
background-color: #8CB302;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
background-color: #008C74;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
background-color: #004C66;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
background-color: #332B40;
}
nav ul li:hover > a {
color: #FAFAFA;
}
nav ul li ul li a {
color: #FAFAFA;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a:hover{
color: #333;
background-color: #FAFAFA !important;
}
nav ul li:hover > ul {
visibility: visible;
}
