My code is really slow in IE8. But in Safari,firefox,chrome it works great

iam stuck now, i really hope if somebody can tell me the problems what i really don't see.

The problem is is the menubar works great in Safari,FF,Chrome. But when i open IE8 its so slow when i put my mouse cursor on another menu area. Or better the entire menu is just so slow!

html id & class are

  <div class="oe_wrapper">
     <ul id="oe_menu" class="oe_menu">

this is my javascript code:

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index', '9999').stop(true, true).slideDown(300, function () {
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);

        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');

        $oe_menu_items.children('div').hide();
    })
});

this is my menu code:

<div class="oe_wrapper">


    <ul id="oe_menu" class="oe_menu">

        <li><a href="#">Lipsum</a>
            <div>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
            </div>
        </li>


        <li><a href="#">PRODUCTEN</a>
            <div style="left:-191px;">
   开发者_运维技巧             <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Persen</a></li>
                </ul>


                </ul>
            </div>
        </li>
        <li><a href="#">Lipsum</a>
            <div style="left:-383px;">
                <ul class="oe_full">
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>

                </ul>
            </div>
        </li>


        <li><a href="#">Lipsum</a>
            <div style="left:-575px;">
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                                    <li><a href="#">Lipsum</a></li>
                </ul>
            </div>
        </li>



        <li><a href="#">CONTACT</a>
            <div style="left:-767px;">
                    <ul>
                    <li class="oe_heading">Lipsum/li>
                                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>

            </div>
        </li>
    </ul>   
</div>

The performance drain is probably in the dom-traversal-on-event. Ie8 is notoriously slow at traversing the dom.

One way around this is to pre-traverse and cache the results like this:

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.each(function(){
        var $this = $(this);
        $this.data('div-children', $this.children('div'));                  
    });

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.data('div-children').css('z-index', '9999').stop(true, true).slideDown(300, function () {
            $oe_menu_items.not('.slided').data('div-children').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').data('div-children').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);

        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');

        $oe_menu_items.children('div').hide();
    })
});

Try using live or delegate.