menu geht.net!!!!

**Menzelchen** · 20-04-2008, 00:41

hallo zu später stunde!

und zwar habe ich ein drop down menu mir gebaut!
nur geht es ürgend wie funzt es net so wie es soll!
erstaml der code:

dbMenu.js :

Code:

var dbMenu = {
    init: function(){
        var uls = document.getElementsByTagName('ul');
        for(var i = 0; i < uls.length; i++){
            if(uls[i].className.search(/\bdbMenu\b/) == -1)
                continue;
            var menu = uls[i];
            
            dbMenu.styleSubMenus(menu);
            
            addEvent(menu, 'mouseover', dbMenu.hover, false);
            addEvent(menu, 'mouseout', dbMenu.hoverOff, false);
            if(menu.className.search(/\bonMouse\b/) == -1){
                addEvent(menu, 'click', dbMenu.click, false);
            }
            addEvent(menu, 'click', dbMenu.nav, false);
        }    
    },
    
    hover: function(e){
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        target.className += ' hover';
        
        var t = (target.className.search(/\bsubMenu\b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu : null;
        if(!t) return;
        clearTimeout(t.timeout);
        
        if(target.parentMenu.className.search(/\bonMouse\b/) != -1){
            t.className += ' click';
        }
    },
    
    hoverOff: function(e){
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        target.className = target.className.replace(/hover/g, '');
        
        if(target.parentMenu.className.search(/\bonMouse\b/) != -1){
            var t = (target.className.search(/\bsubMenu\b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu: null;
            if(!t) return; 
            t.timeout = setTimeout(function(){ t.className = t.className.replace(/click/g, ''); }, 30);
        }
    },
    
    click: function(e){
        if(window.event){
            window.event.cancelBubble = true;
        }
        if(e && e.stopPropagation){
            e.stopPropagation();
        }
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        if(target.className.search(/\bclick\b/) == -1){
            target.className += ' click';
        }else{
            target.className = target.className.replace(/click/g, '');
        }
    },
    
    nav: function(e){
        if(window.event){
            window.event.cancelBubble = true;
        }
        if(e && e.stopPropagation){
            e.stopPropagation();
        }
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;
        
        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }
        
        for(var i = 0; i < target.childNodes.length; i++){
            var node = target.childNodes[i];
            if(node.nodeName.toLowerCase() == 'a'){
                window.location = node.href;
                break;
            }
        }
    },
    
    getTarget: function(target, elm){
        if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){
            return dbMenu.getTarget(target.parentNode, elm);
        }else if(target.nodeName.toLowerCase() == 'body'){
            return null;
        }else{
            return target;
        }
    },
    
    styleSubMenus: function(menu){
        lis = menu.getElementsByTagName('li');
        for(var i = 0; i < lis.length; i++){
            node = lis[i];
            node.parentMenu = menu;
            if(node.getElementsByTagName('ul').length != 0){
                node.className += ' subMenu';
                sublis = node.getElementsByTagName('li');
                for(var j = 0; j < sublis.length; j++){
                    sublis[j].parentSubMenu = node;
                }
            }
        }
    }
}
    
function addEvent(elm, evType, fn, useCapture){
	if(elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}else if(elm.attachEvent){
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}else{
		elm['on' + evType] = fn;
	}
}

addEvent(window, 'load', dbMenu.init, false);

global.css

Code:

#menu{
	position:relative;
	z-index:1;
	top:0;
	left:0;
	padding:0px;
	margin:0px;
	list-style:none;
}
li ul{
	position:relative;
	display:none;
	padding:0px;
	margin:0px;
	list-style:none;
	background-color: #2C4B5F;
}



li{
	position:relative;
	background-image: url(gfx/menu.gif);
	padding:0px;
	margin:0px;
	color:#FFFFFF;
}
.subMenu{
	background-repeat:no-repeat;
}
.click{

	color:#FFFFFF;
}
.click ul{
	display:block;
}
.hover, ul li a:hover{
	cursor:pointer;
	background-image: url(gfx/menu-mo.gif);
	color:#FFFFFF;
}
li ul li.hover, li ul li.hover a:hover{
	background-color:#000000;
}
li a{
	width:100%;
}
li a, li ul li a, li.hover ul li a{
	text-decoration:none;
	color:#FFFFFF;
}
li.hover a, li ul li.hover a{
	color:#fffab5;
	text-decoration:underline;
}

.dbMenu .subMenu{
	background-image:url('gfx/down.gif');
	background-position:bottom right;
}
.dbMenu li{
	float:left;
	width:94px;
	height: 23px;
	text-align: center;
	font-weight:bold;
	vertical-align: center;
	font-size: 11px;
}
.dbMenu li ul{
	position:absolute;
	top: 11px;
	left:0px;
	width:94px;
}
.dbMenu li ul li{
	float:none;
}

indes.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dropdown menu Menu Test</title>
	<script src="dbMenu.js" type="text/javascript">


	</script>
	<link href="global.css" type="text/css" rel="stylesheet" media="screen">

</head>
<body>

	<ul id="menu" class="dbMenu onMouse">
        <li><a href="http://www.javascriptkit.com">Test1</a></li>
		<li><span background-color="#000000">Test2<span>
            <ul>
				<ul><a href="http://www.cnn.com">Hallo</a></ul>

            </ul>
		</li>

	    <li>Test3
            <ul>
                <ul><a href="http://javascriptkit.com">JavaScipt Kit</a></ul>


            </ul>
	    </li>
	    <li><a href="http://javascriptkit.com/jsref/">Test4</a></li>
	    <li><a href="http://javascriptkit.com/domref/">Test5</a></li>

	</ul>


</body>
</html>

Das problem:
Es werden alle bilder angezeigt bis auf Test2 und Test3 !
das bild was im bg angezeigt werden soll liegt in gfx/menu.gif

Meine Frage ist warum das so ist....

MFG
Menzelchen