nicht angemeldet
Hi, ich hab von dieser Seite das Beispiel des CSS basierten Klappmenü übernommen. Leider hab ich folgendes Problem ich möchte einen Unterlink einen weiteren Unterlink zufügen. Dieser sollte dann rechts daneben angezeigt werden, wenn die Maus über den ersten Unterlink fährt wird mir zwar schon der Unterunterlink angezeigt, aber leider noch nicht an der richtigen Position und bei alles Unterlinks der 1. Ebene. Ich hoffe Ihr habt es verstanden was ich bezwecken möchte.
Der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<title>Geteilte Navigationsleisten</title>
<style type="text/css">
body, p a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: #FFFFFF; background-color: #ffffe0;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.52em; left: 0em;
display: none; /* Unternavigation ausblenden */
}
ul#Navigation ul li ul { position: absolute; z-index: 200;
display: block;
border-color: #ccc #888 #555 #bbb; width: 100%; }
ul#Navigation ul li ul li { position: relativ; top: 0; left: 100%; text-align:left;
display: none; border-width: 1px; border-style: solid;
border-color: #ccc #888 #555 #bbb; text-indent: 3px; }
ul#Navigation ul ul ul li:hover ul
{
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation ul ul ul li:hover ul
{
display: none; /* Unternavigation in modernen Browsern einblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 8.0em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.06em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #FFFFFF; background-color: #5E68AF;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #483D8B;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation ul:hover li
{
display: block; /* Unternavigation in modernen Browsern einblenden */
}
</style>
</head>
<body>
<div id="Rahmen"><ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><a href="#Beispiel">Seite 4b</a><ul >
<li><a href="#Beispiel">Seite 4d</a></li>
<li><a href="#Beispiel">Seite 4e</a></li>
</ul></li>
<li><a href="#Beispiel">Seite 4c</a><ul >
<li><a href="#Beispiel">Seite 4f</a></li>
<li><a href="#Beispiel">Seite 4g</a></li>
</ul></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 5</a></li>
</ul><div></div></div>
</body>
</html>