Hi,
ich ahb in dem Menü die Größen angepasst und nun komme ich mit der Maus nicht mehr in die zweite Ebene, also diese wird ausgeblendet bevor ich mit der Maus draufgehen kann. Ich finde de nFehler einfach nicht, aber warscheinlich sehe ich den Wald vor lauter Bäumen nicht mehr
.
ich ahb in dem Menü die Größen angepasst und nun komme ich mit der Maus nicht mehr in die zweite Ebene, also diese wird ausgeblendet bevor ich mit der Maus draufgehen kann. Ich finde de nFehler einfach nicht, aber warscheinlich sehe ich den Wald vor lauter Bäumen nicht mehr
.
Code:
ul { position:absolute;
top: 102px;
margin: 0;
padding: 0;
list-style: none;
width: 178px; /* Width of Menu Items */
height:300px;
}
ul li {
position:relative;
}
ul li.einseins {
padding-left:60px;
background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:130px; background-position:60px 0px;
}
ul li.einszwei {
padding-top:44px;
padding-left:33px;
background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:130px; background-position:33px 44px;
}
ul li.einsdrei {
padding-top:43px;
padding-left:18px;
background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:130px; background-position:18px 43px;
}
ul li.einsvier {
padding-top:52px;
padding-left:33px;
background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:130px; background-position:33px 52px;
}
ul li.einsfuenf {
padding-top:52px;
padding-left:60px;
background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:130px; background-position:60px 52px;
}
/* Styles for 2. Submenü */
li ul.zweieins {
position:absolute;
left: 180px; /* Set 1px less than menu width */
top: 0;
display: none;
}
li ul.zweizwei {
position:absolute;
left: 180px; /* Set 1px less than menu width */
top: -22px;
display: none;
}
li ul.zweidrei {
position:absolute;
left: 180px; /* Set 1px less than menu width */
top: -88px;
display: none;
}
li ul.zweivier {
position:absolute;
left: 180px; /* Set 1px less than menu width */
top: -153px;
display: none;
}
li ul.zweifuenf {
position:absolute;
left: 180px; /* Set 1px less than menu width */
top: -140px;
display: none;
}
li.zweizweieins {
padding-left:40px;
}
li.zweizweizwei {
padding-left:20px;
padding-top:44px;
}
li.zweizweidrei {
padding-left:15px;
padding-top:43px;
}
li.zweizweivier {
padding-left:20px;
padding-top:52px;
}
li.zweizweifuenf {
padding-left:40px;
padding-top:52px;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777777;
background: transparent; /* IE6 Bug */
padding: 3px;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #FF0000; background: url(../pics/punktanimation.gif); background-repeat:no-repeat; display:block; width:178px;} /* Hover Stylesfor primary menue */
li ul li a:hover { color: #FF0000; background: none;} /* Hover Stylesfor secondary menue */
li ul li a { width:178px;} /* Sub Menu Styles */
li:hover ul, li.over ul { display: block;} /* The magic */
Code:
body {font: normal 10pt verdana, sans-serif; background-color:#EFEFEF;}
#hintergrund {position:absolute; width:900px; left:50%; margin-left:-450px; /* negative Hälfte von width: 790px */
height:502px; top:50%; margin-top:-251px; /* negative Hälfte von width: 450px */
background-image: url(../pics/hintergrund.gif); background-repeat:no-repeat;}
#logo {position:absolute; display:block; left:250px; top:20px; width:197px; height:34px; background-image: url(../pics/fdzlogona.gif); background-repeat:no-repeat;}
.linkkeinrahmen {border-width:0px;}
.inhalt {position:absolute; height:330px; width:405px; }
.scroll {left:480px; top:85px; overflow:auto;}
.flash {position:absolute; height:280px; width:312px; left:432px; top:75px;}
#fliesstext { padding:10px; }
.language1 { position:absolute; height:24px; width:34px; left:734px; top:28px; padding:0px; margin:0px; }
.language2 { position:absolute; height:24px; width:34px; left:791px; top:28px; padding:0px; margin:0px; }
.language3 { position:absolute; height:24px; width:34px; left:848px; top:28px; padding:0px; margin:0px; }
.agb { position:absolute; height:24px; width:34px; left:791px; top:450px; padding:0px; margin:0px; }
.kontakt { position:absolute; height:24px; width:34px; left:848px; top:450px; padding:0px; margin:0px; }
.grauerrahmen {border:1px solid #d1d2d4; }
a.logoueber:link { background: none; display:block;}
a.logoueber:visited { background: none; display:block;}
a.logoueber:hover {background: url(../pics/fdzlogoa.gif); display:block; width:197px; height:34px; background-repeat:no-repeat;}
a.logoueber:active { background:url(../pics/fdzlogoa.gif); display:block; width:197px; height:34px; background-repeat:no-repeat;}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="bueroexit">
<meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein">
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine">
<meta name="keywords" lang="en" content="holiday, Greece, sunshine">
<meta name="keywords" lang="fr" content="vacances, Grèce, soleil">
<!-- grundlegende Seiteneinstellungen -->
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/menue.css">
<link rel="stylesheet" type="text/css" href="css/inhalt.css">
<script type="text/javascript" src="js/menuescript.js"></script>
</head>
<body>
<div id="hintergrund">
<!-- Menue -->
<ul id="nav">
<li class="einseins"><a href="#"> Produkte</a>
<ul class="zweieins">
<li class="zweizweieins"><a href="#">Doppelrakelhalter</a>
<li class="zweizweizwei"><a href="#">DR-Ersatzrakel</a></li>
<li class="zweizweidrei"><a href="#">Einzelrakel</a></li>
<li class="zweizweivier"><a href="#">Silikonrakel</a></li>
<li class="zweizweifuenf"><a href="#">Handrakel</a></li>
</ul>
</li>
<li class="einszwei"><a href="#"> Anleitung</a>
<ul class="zweizwei">
<li class="zweizweieins"><a href="#">DR-Halter Spezial</a></li>
</ul>
</li>
<li class="einsdrei"><a href="#"> Videos</a>
<ul class="zweidrei">
<li class="zweizweieins"><a href="anleitung.html">Beschichtungsdurchgang</a></li>
</ul>
</li>
<li class="einsvier"><a href="#"> Tech. Schriften</a>
<ul class="zweivier">
<li class="zweizweieins"><a href="#">Dickschichtachablonen</a></li>
<li class="zweizweizwei"><a href="#">Beschichtungsgeschwindigkeiten</a></li>
<li class="zweizweidrei"><a href="#">Emulsionsempfehlung</a></li>
<li class="zweizweivier"><a href="#">Beschichtung von HGP Schablonen</a></li>
</ul>
</li>
<li class="einsfuenf"><a href="#"> Tech. Bilder</a></li>
</ul>
<div id="logo"><a class="logoueber" href="#"><img class="linkkeinrahmen" src="pics/blindes.gif" width="197" height="34" alt="Logo" title="Zur Startseite"></a>
</div>
<div class="language1 grauerrahmen"><img src="pics/daktiv.gif" width="34" height="24" alt="Deutsche übersetzung"></div>
<div class="language2 grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/einaktiv.gif" width="34" height="24" alt="english" title="English translation"></a></div>
<div class="language3 grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/sinaktiv.gif" width="34" height="24" alt="espaniol" title="Verter el esparto"></a></div>
<div class="inhalt scroll">
<h3>Headline</h3><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br>
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl <br>
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in <br>
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at <br>
vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis<br>
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi<br>
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut <br>
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate <br>
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <br>
feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet<br>
doming id quod mazim placerat facer possim assum.
</div>
<div class="agb grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/agbna.gif" width="34" height="24" alt="agbs" title="Allgemeine Geschäftsbedingungen (AGB)"></a></div>
<div class="kontakt grauerrahmen"><a href="#"><img class="linkkeinrahmen" src="pics/mailna.gif" width="34" height="24" alt="kontakt" title="Kontakt / Impressum"></a></div>
</div>
</body>
