[infernalshade]

Hallo Leute!

Ich stehe gerade vor einem Problem und komme einfach nicht drauf was das sein könnte...

So ist das Menü aufgebaut:

<div id="nav-inner-right">
  <ul class="menu">
    <li class="item1">reha</li>
    <li id="current" class="parent active item2">fitness
       <ul>
          <li class="item4">Unterpunkt 1</li>
          <li class="item5">Unterpunkt 2</li>
       </ul>
    </li>
    <li class="parent item3">kraftsport
       <ul>
          <li class="parent item6">sportler
             <ul>
                <li class="item10">Unterunterpunkt 1</li>
                <li class="item11">Unterunterpunkt 2</li>
                <li class="item12">Unterunterpunkt 3</li>
                <li class="item13">Unterunterpunkt 4</li>
                <li class="item14">Unterunterpunkt 5</li>
                <li class="item15">Unterunterpunkt 6</li>
                <li class="item16">Unterunterpunkt 7</li>
                <li class="item17">Unterunterpunkt 8</li>
             </ul>
          </li>
          <li class="item18">test</li>
       </ul>
    </li>
    <li class="item7">leistungssport</li>
    <li class="item8">koordination</li>
    <li class="item9">wellness &amp; spa</li>
  </ul>
</div>

Wie ihr seht, also ein Menü mit 3 Leveln (Top, Untermenü, Unteruntermenü)

Verwenden tu ich dieses CSS:

/**********************/
/*** Navigation CSS ***/
/**********************/
div#nav-inner-right ul {
	list-style-image:none;
	list-style-type:none;
	height:20px;
	margin-left:5px;
}

div#nav-inner-right ul li {
	float:left;
	margin-top:10px;
	margin-left:-1px;
}

div#nav-inner-right ul li a {
	display:block;
	width:120px;
	text-align:center;
	color:#FFFFFF;
	line-height:20px;
}

div#nav-inner-right ul li ul {
	position:absolute;
	visibility:hidden;
	line-height:normal;
	margin-left:-1px;
	height:auto;
}

div#nav-inner-right ul li:hover ul, div#nav-inner-right ul li.sfhover ul {
	visibility:visible;
}

div#nav-inner-right ul li ul li {
	float:none;
	margin:0;
}

div#nav-inner-right ul li ul li a {
	line-height:25px;
}

div#nav-inner-right ul li ul li ul {
	position:absolute;
	visibility:hidden !important;
	margin-left:100px;
	margin-top:-20px;
}

div#nav-inner-right ul li ul li ul li a {
	width:auto;
	white-space:nowrap;
	margin-left:5px;
	margin-right:5px;
}

div#nav-inner-right ul li ul li:hover ul, div#nav-inner-right ul li ul li.sfhover ul {
	visibility:visible !important;
}

Und für den IE6 benutz ich dieses SonOfSuckerfish-JS:

sfHover = function() {
	var sfEls = document.getElementById("nav-inner-right").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Ok und nun zu meinem Problem:
Schaut dazu am besten den Screenshot im Anhang an...

Der rot markierte Bereich ist das Problem, der wird nur im IE6 angzeigt, und auch nur wenn der Menüpunkt (in dem Fall "sportler") nochmal ein Untermenü hat! Woher kommt das und wie bekomm ich den Freiraum weg?
Info: Der Klickbare Bereich ist bei "sportler" und "test" in beiden Fällen gleich groß, also 25px, wie es im CSS steht! Der Bereich dazwischen (rot markiert) ist nicht klickbar, jedoch erschein beim überfahren das Unteruntermenü..

vielen Dank schonmal im voraus!

Grüße,
infernalshade