This update will fix most problems people have with Internet Exporer and drop down menu. I created all new css classes and combine it with jQuery framework. Just download updated file from ThemeForest.
Here is the change log:
1. header.php
Remove line 11:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/superfish.css" type="text/css" media="screen" />
and line 33:
$("ul.sf-menu").superfish();
Change line 50 to:
<ul id="nav">
2. style,css
Completely remove “Page navigation” section (line 224-278) and replace them with these new lines:
/* Page navigation
------------------------------------------------------*/
#nav, #nav ul{
z-index:999;
list-style-type:none;
list-style-position:outside;
position:relative;
}
#nav a{
display:block;
float:none;
font: bold 1.0em Arial, Tahoma, sans-serif;
color: #fff;
text-decoration: none;padding: 12px 15px 13px 15px; }
#nav a:hover{
background: url("images/bg_nav_hover.gif") repeat-x 0% 0%;
}
#nav li{
float:left;
position:relative;
}
#nav li:hover{
background: url("images/bg_nav_hover.gif") repeat-x 0% 0%;
}
/* first dropdown */
#nav ul {
position:absolute;
top:3.3em;
z-index:999;
margin: 0;
padding: 0;
background-color: #7a7d7d;
}
#page-navigation #nav li ul li{
float: left;
clear: both;
height: auto;
padding: 0;
margin: 0;
}
#page-navigation #nav li li:hover{
background-color: #9cb032;
}
/* drop links */
#page-navigation #nav li ul a {
width:15em;
height:auto;
z-index:999;
border: none;
padding: 7px 5px 7px 15px;
}
#page-navigation #nav li ul a:hover {
background: none;
background-color: #9cb032;
}
#nav ul ul{
top:auto;
z-index:999;
}
#nav li.current_page_item a
{
background: url("images/bg_nav_active.gif") no-repeat 50% 100%;
padding: 14px 15px 18px 15px;
border-left: 1px solid #ece9e2;
border-right: 1px solid #ece9e2;
}
#nav li.current_page_item li a
{
background: none;
background-color: #7a7d7d;
}
/* second level dropdown */
#nav li ul ul {
left:16.6em;
margin:-2.4em 0 0 0;
z-index:99;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
z-index:99;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
z-index:99;
}
3. functions.js
Add new function that will interact with drop down menu:
function MainNavigation(){
$("#nav ul ").css({display: "none"}); // Opera Fix
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
MainNavigation();
});

