menu geht.net!!!!

[Menzelchen]

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 :



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


#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


<!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

[fs111]

Java != JavaScript -> verschoben...

[Menzelchen]

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

[Menzelchen]

hi,
weis keiner eine antwort?

[zenobic]

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