Drop Down Menu in IE

[sagive]

Hey,

i have created a drop down menu that give me hell
and refuses to work in internet explorer..

Can anyone find the error? (its a wordpress website)

Here is the menu itself (as i say.. wordpress):

<div class="topmenu">
<ul id="nav">
<li id="home" <?php if(is_page('home')){echo "class=current_page_item";} ?>><a href="/index.php">דף הבית</a></li>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=2'); ?>
</ul>
</div>

Here is the javasccript:

$(document).ready(function() {
	$("#nav ul").css({display: "none"}); // Opera Fix
	$("#nav li").hover(function(){
	$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
});

here is the Css:

#nav { list-style: none;  margin-top: -7px;}
#nav li { float: left; line-height: 30px;}
#nav li a {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-left: 1px solid;
	padding: 0px 25px;
}

#home a {
    border-right: 1px solid;
}

#nav li ul {
    display: none;
    list-style: none outside none;
    padding: 0;
    position: absolute;
}
#nav li:hover ul, li.sfhover { display: block }

#nav li ul li { 
    background: none repeat scroll 0 0 #264561;
    opacity: 0.8;
    padding: 5px 0;
}

#nav li ul li a { 
	font-size: 12px;
	border: none;
}

I know its a lot of code but would really appreciate any that can
help me since i cant get it to work at internet explorer.

[stbuchok]

$(this).find('ul:first').css({visibility: "visible",display: "none"}).show()

Why are you setting the visibility to visible and the setting the display to none (hiding it) and then right after that you are using the show() function?

Try this instead.

$("#nav li").hover(function(){
	$('ul:first', this).show();
    },
    function(){ 
        $('ul:first', this).hide();
});