menu geht.net!!!!

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

Java != JavaScript -> verschoben...

moin,
ja war mir nicht ganz sicher wo ich es reinschreiben sollte!^^
Aber hast du ne idee?

hi,
weis keiner eine antwort?

AFAIK kommen in <ul> <li> tags, also auch beim Verschachteln: http://validator.w3.org/