Frage stellen
Ich habe zwei Container die untereinander liegen. Im obigen habe ich mit CSS ein Menu mit Submenus entworfen. Dieses verschwindet aber, wenn ich UNterpunkte auswählen will, unter dem unteren Container. Leider sehe ich den Fehler nicht. Wäre super, wenn mir jemand helfen könnte.
Ed
CSS
- Code: Alles auswählen
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#rahmen {
border:medium solid #bbb;
text-align:center;
width: 800px;
z-index:2;
position: relative;
margin-top: 50px;
margin-right: auto;
margin-bottom: 150px;
margin-left: auto;
}
#navigation {
width: 790px;
height: 20px;
padding: 5px 5px 5px 5px;
z-index:10;
background-image: url(back_navi.jpg);
}
#inhalt {
width: 790px;
background-color: #FFF;
padding: 5px;
z-index:3;
filter:alpha(opacity=95); /* IE */
-moz-opacity:0.95; /* Gecko-Browser */
opacity:0.95; /* Opera 9+ */
}
p {
line-height:1.5em;
letter-spacing:0.1em;
}
.navi_schrift {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-decoration: none;
}
.mail {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #A30E12;
text-decoration: none;
}
/* ab hier neues css für menu*/
ul.menu, ul.menu ul {
list-style: none;
list-style-type: none;
margin: auto;
}
ul.menu a {
display: block;
padding: 0px 20px 0px 20px;
font-weight: normal;
}
ul.menu a:link {
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
ul.menu a:visited {
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
ul.menu a:hover {
font-size: 12px;
font-weight: bold;
color: #444444;
text-decoration: none;
}
ul.menu ul a:link {
color: #444444;
text-decoration: none;
}
ul.menu ul a:visited {
color: #444444;
text-decoration: none;
}
ul.menu ul a:hover {
color: #ff8800;
text-decoration: none;
}
ul.menu li {
padding: 0;
margin: 0;
float: left;
list-style: none;
}
/* Für Unterpunkte keine Float-Eigenschaft */
ul.menu ul li {
float:none;
background-color: 440000;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.menu ul li.hover, ul.menu ul li:hover {
background-color: #f8d6af;
}
/* Zweite Ebene */
ul.menu ul {
margin:0;
padding: 0;
position: absolute;
background-color: #f4f4f4;
border: 1px solid #f8d6af;
display: none;
width: 180px;
}
/* Zweite Ebene anzeigen */
ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
/* Dritte Ebene */
ul.menu li.hover ul ul, ul.menu li:hover ul ul {
display: none;
margin-left: 160px; /* Breite eines Listenelements - Überlagerung */
margin-top: -20px; /* Höhe eines Listenelements */
}
/* Dritte Ebene anzeigen */
ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
display: block;
}
/* Vierte Ebene */
ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
display: none;
}
/* Vierte Ebene anzeigen */
ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
display: block;
}
Und hier die Seite dazu:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<link href="sowadastyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### start-->
<div>
<img id="background" src="bilder/background.jpg" alt="" title="" />
</div>
<div id="rahmen">
<div class="navi_schrift" id="navigation">
<!-- ###HAUPT_NAVI### start-->
<!-- ###HAUPT_NAVI### stop-->
<br />
Telefon: 0 71 21 / 33 00 90<br />
Telefax: 0 71 21 / 33 42 21
<br />
Email: </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
</div>
<!-- ###DOCUMENT_BODY### stop-->
</body>
</html>