[jquery] drop down težava

Lep pozdrav!

Pri izdelavi drop down menuja se mi že lep čas zatika. Takole imam vse skupaj struktorirano:

**HTML**

<div id="nav">

     <ul>

          <li id="logo"><a href="#" title="Link">Link</li>

          <li>

               <a href="#" title="Link">Link</a>

               <div id="submenu-big">

                    <ul>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                    </ul>

               </div>

          </li>

          <li>

               <a href="#" title="Link">Link</a>

               <div id="submenu-medium">

                   <ul>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                    </ul>

               </div>

          </li>

          <li class="active">

               <a href="#" title="Link">Link</a>

               <div id="submenu-small">

                    <ul>

                         <li><a href="#" title="Link">Link </a></li>

                         <li><a href="#" title="Link">Link</a></li>

                         <li><a href="#" title="Link">Link</a></li>

                    </ul>

               </div>

          </li>

          <li><a href="#" title="Link">Link</a></li>

     </ul>

</div>

**Javascript**  

$("#nav ul li").mouseover(function(){

     $("div", this).stop(false, true).hide();



     var submenu = $("div", this);



     submenu.stop().slideDown(300);



     $(this).mouseout(function(){

          submenu.slideUp(300);

     });

});

Po moji logiki se bi moral submenu prikazati ko bi šel preko li taga in skriti ko bi šel iz li taga. Pomeni ker je submenu znotraj li taga bi se skril šele ko bi šel z miško bodisi iz glavnega menija ali submenija. V mojem primeru sicer približno funkcija deluje, ampak ko grež z miško iz glavnega menuja na submenu se submenu prvo skrije in nato spet pokaže (tako da je moteče ko utripne stvar). Enako se zgodi če greš z miško preko li a taga. Upam, da bo znal kdo rešit problem (sploh ne dvomim) in hvala v naprej za odgovore!

Lp, Jure

Če ti kaj pomaga, ena rešitev

css

.sidebarmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: bold 13px Verdana;

width: 180px; /* glavni meni */

border-bottom: 1px solid #ccc;

}

.sidebarmenu ul li{

position: relative;

}

/* starš /

.sidebarmenu ul li a{

display: block;

overflow: auto; / IE7 */

color: white;

text-decoration: none;

padding: 6px;

border-bottom: 1px solid #778;

border-right: 1px solid #778;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #012D58;

}

.sidebarmenu ul li a:visited{

color: white;

}

.sidebarmenu ul li a:hover{

background-color: black;

}

/* otrok */

.sidebarmenu ul li ul{

position: absolute;

width: 170px;

top: 0;

visibility: hidden;

}

.sidebarmenu a.subfolderstyle{

background: url(right.gif) no-repeat 97% 50%;

}

/* IE */

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

**js**

var menuids=["sidebarmenu1"]

function initsidebarmenu(){

for (var i=0; i<menuids.length; i++){

var ultags=document.getElementById(menuids*).getElementsByTagName("ul")

for (var t=0; t<ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids*)

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"

else //če je ul

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

}

for (var t=ultags.length-1; t>-1; t--){

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

}

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

**html**

<div class="sidebarmenu">

<ul id="sidebarmenu1">

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

<li><a href="#">Starš 1</a>

<ul>

<li><a href="#">otrok 1.1</a></li>

<li><a href="#">otrok 1.2</a></li>

</ul>

</li>

<li><a href="#">Link 3</a></li>

<li><a href="#">Starš 2</a>

<ul>

<li><a href="#">otrok 2.1</a></li>

<li><a href="#">Starš 2.1</a>

<ul>

<li><a href="#">otrok 2.1.1</a></li>

<li><a href="#">otrok 2.1.2</a></li>

<li><a href="#">otrok 2.1.3</a></li>

<li><a href="#">otrok 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Link 4</a></li>

</ul>

</div>

```**

V bistvu sem že našo eno simpl rešitev: http://plugins.jquery.com/project/jfa stmenu. Hvala vseeno!