nicht angemeldet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertikale überlappende popup-Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#navi {list-style-type:none; margin:0; padding:0; width:200px;}
#navi li ul {list-style-type:none; display:none; margin:0; padding:0; width:200px;}#navi li {margin:0; padding:2px; background-color:#CFCFCF; float:left; width:100%;}
#navi li ul li {background-color:#00AFAF;}#navi li:hover {position:relative;}
#navi li:hover ul {display:block; position:absolute; top:1em; left:5ex;}#navi a {display:block; width:100%; text-decoration:none;}
#navi a:link, #navi a:visited, #navi a:active, #navi a:focus {color:#000000; background-color:transparent;}#navi li a:hover {color:#800000; background-color:#EFEFEF;}
#navi li ul li a:hover {color:#800000; background-color:#00FFAF}
-->
</style>
<!--[if IE]><script type="text/javascript">
function init() {
var naviUL = document.getElementById("navi");
var naviULlis = naviUL.getElementsByTagName("li");
for (var i = 0; i < naviULlis.length; i++) {
if(naviULlis[i].parentNode==naviUL) {
naviULlis[i].onmouseover=einblenden;
naviULlis[i].onmouseout=ausblenden;
}
}
}
function einblenden(){
this.style.position="relative";
var nestedUL = this.getElementsByTagName("ul")[0];
if (nestedUL) {
nestedUL.style.display="block";
nestedUL.style.position="absolute";
nestedUL.style.top="1em";
nestedUL.style.left="5ex";
}
}
function ausblenden(){
this.style.position="static";
var nestedUL = this.getElementsByTagName("ul")[0];
if (nestedUL) {
nestedUL.style.display="none";
nestedUL.style.position="static";
}
}if (document.getElementById && document.getElementsByTagName) {
window.onload=init;
}
</script><![endif]-->
</head>
<body>
<ul id="navi">
<li><a href="#">Hauptmenüpunkt1</a>
<ul>
<li><a href="#">Untermenüpunkt1.1</a></li>
<li><a href="#">Untermenüpunkt1.2</a></li>
</ul>
</li>
<li><a href="#">Hauptmenüpunkt2</a>
<ul>
<li><a href="#">Untermenüpunkt2.1</a></li>
<li><a href="#">Untermenüpunkt2.2</a></li>
<li><a href="#">Untermenüpunkt2.3</a></li>
</ul>
</li>
<li><a href="#">Hauptmenüpunkt3</a></li>
<li><a href="#">Hauptmenüpunkt4</a>
<ul>
<li><a href="#">Untermenüpunkt4.1</a></li>
<li><a href="#">Untermenüpunkt4.2</a></li>
</ul>
</li>
</ul>
</body>
</html>
Danke nochmal für deinen Tipp mit dem anderen Script!
Hab das nun verwendet und entsprechend angepasst nun funktioniert soweit alles, zumindest im IE, Firefox und Opera.
Mehr hab ich nicht installiert, reicht aber denk ich auch... ;)
Also danke!
Gruß Michael