1,105,423 Community Members

Drop Down Menu in IE

Member Avatar
sagive
Junior Poster in Training
85 posts since Dec 2009
Reputation Points: 24 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 
$(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();
});
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: