javascript in navigacija

Pri spodnji kodi imam en problemček.. gre za drop-down navigacijo. Skripta najde class elementa v navigaciji #nav (čez katerega greš z miško) in odpre-"zaslajda" istoimenski class znotraj diva #sub-nav. Vse deluje kot mora, le ena pomankljivost je.. ko greš z miško preko sub-menuja se le ta zapre, kar se nebi smel. Kaj delam narobe?

var timer = [];

    $("#nav li").hover(

        function () {

            var id = jQuery.data(this);

            var className = $(this).attr('class');

            var submenu = '#sub-nav .'+className;



            $(this).addClass('selected');



            timer[id] = setTimeout(function() {

                $(submenu).slideDown(300);

                timer[id] = "";

            }, 300);

        },

        function () {

            $(this).removeClass('selected');



            var id = jQuery.data(this);

            var className = $(this).attr('class');

            var submenu = '#sub-nav .'+className;



            if (timer[id] != "") {

                clearTimeout(timer[id]);

            } else {

                $(submenu).slideUp(300);

            }

        }

    );

Hvala za pomoč in Lp!

Pokaži še HTML kodo..

Evo html:

<div id="nav">

        <ul>

            <li class="home"><a href="#" title="Home">Home<p>Home is d'best</p></a></li>

            <li class="gallery"><a href="#" title="Gallery">Gallery<p>Content is King!</p></a></li>

            <li class="forum"><a href="#" title="Forum">Forum<p>Showcase Component</p></a></li>

            <li class="articles"><a href="#" title="Articles">Articles<p>Component</p></a></li>

            <li class="other"><a href="#" title="Other">Other<p>Sample Other</p></a></li>

        </ul>

</div>



<div id="sub-nav">

    <div class="home">

        <ul>

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

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

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

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

            <li><a href="#" title="Joomla">Joomla! Overview</a></li>

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

            <li><a href="#" title="News feeds">News feeds</a></li>

        </ul>

    </div>

    <div class="gallery">

        <ul>

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

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

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

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

            <li><a href="#" title="Joomla">Joomla! Overview</a></li>

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

            <li><a href="#" title="News feeds">News feeds</a></li>

        </ul>

    </div>

    <div class="forum">

        <ul>

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

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

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

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

            <li><a href="#" title="Joomla">Joomla! Overview</a></li>

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

            <li><a href="#" title="News feeds">News feeds</a></li>

        </ul>

    </div>

    <div class="articles">

        <ul>

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

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

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

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

            <li><a href="#" title="Joomla">Joomla! Overview</a></li>

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

            <li><a href="#" title="News feeds">News feeds</a></li>

        </ul>

    </div>

    <div class="other">

        <ul>

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

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

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

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

            <li><a href="#" title="Joomla">Joomla! Overview</a></li>

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

            <li><a href="#" title="News feeds">News feeds</a></li>

        </ul>

    </div>

</div>

Submenuje bi moral imeti vgnezdene v li-je glavne navigacije, na katere tudi bindaš hover action. Če se ti ne da zajebavat pa si poglej jquery superfish menu. Ne znam povedat bolj po domače:)

da ne pozabim... Ie6 na li-jih ne zazna hover eventa.

Hm.. to sem opazil pri drugih podobnih drop-down menujih, da bi moral submenu biti v li (logično), ampak raje imam simpl in nazorno kodo, zato sem delal na tak način. Očitno bom res mogo v li dat, da se nebom preveč zafrkaval. Hm.. čudno v IE-testerju mi hover event deluje normalno.

IE-tester ni vedno 100% zanesljiv, 100% zanesljivost dobiš samo z Windows XP , ki ima native IE6.

Sicer pa lahko naložiš whatever:hover in bo tudi IE6 podpiral :hover na vseh elementih.

Kot so ti že omenili, najlepše in najlažje ti bo, če zadevo gnezdiš znotraj <li>-ja.

Tutorial in tutorial