I am using drop down menu's on a website they work perfectly except for IE.

I have spent the last two hours trying to figure this out but i just cant seem to work out what the issue is.

I am using superfish for the menu's and once you mouse off the link the menu stays on screen for about 2-3 seconds and it's slightly out of position.

I tried css fixes on the ul but it only applied it to the jquery drop down not the instance that remains.

These images illustrate what is happening;

Superfish Drop Down Menu's IE

Here is the css / html for the menu;

Markup

<div class="main-menu">
    <div class="menu-header">
        <ul id="menu-main" class="menu sf-js-enabled">
            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
                <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/">
                Ashton Klein
                <span class="sf-sub-indicator"> »</span>
                </a>
                <ul class="sub-menu" style="visibility: hidden; display: none;">
                    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
                        <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/about/">
                        About
                        <span class="sf-sub-indicator"> »</span>
                        </a>
                        <ul class="sub-menu" style="visibility: hidden; display: none;">
                            <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/who-we-are/">Who we are</a>
                            </li>
                            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/our-vision/">Our Vision</a>
                            </li>
                            <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/our-commitment/">Our Commitment</a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
                        <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/opportunities/">
                        Opportunities
                        <span class="sf-sub-indicator"> »</span>
                        </a>
                        <ul class="sub-menu" style="display: none; visibility: hidden;">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/careers/">Careers</a>
                            </li>
                            <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
                            <a href="http://wp.ashto开发者_运维百科nklein.com/ashton-klein/opportunities/franchising/">Franchising</a>
                            </li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/marketing-opportunities/">Marketing</a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
                    <a href="http://wp.ashtonklein.com/ashton-klein/newsroom/">Newsroom</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#header .webmenu .main-menu ul
{
    width:100%;
    height:40px;    
}
#header .webmenu .main-menu ul li
{
    float:left;
    line-height:30px;
    font-family: 'Philosopher', arial, serif;
    font-size:18px;
    height:30px;
    margin:5px 15px 5px 0;
    padding:0 10px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius: 4px;
    position: relative;
    z-index: 20px;
    display:block;
}

#header .webmenu .main-menu ul li.current-menu-item, #header .webmenu .main-menu ul li.current-menu-parent, #header .webmenu .main-menu ul li.current-page-ancestor
{
    background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li a
{
    color:#FFF;
    text-decoration:none;
    display:block;
    outline:none;
}
#header .webmenu .main-menu ul li:hover
{
    background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li span.sf-sub-indicator
{
    display:block;
    float:right;
    width:6px;
    height:4px;
    background:url('../images/menu_arrow.png') no-repeat right;
    margin-left:10px;
    margin-top:13px;
    text-indent:-9999px;
}

#header .webmenu .main-menu ul li ul.sub-menu
{
    position:absolute;
    display:none;

    /* corners */
    border-radius:0 4px 4px;
    -moz-border-radius:0 4px 4px;
    -webkit-border-radius:0 4px 4px;

    background:#007E63;
    padding:5px;
    height:auto;
    width:200px;
}
#header .webmenu .main-menu ul li:hover ul.sub-menu
{
    display:inherit;
    left:0px;
    top:28px;
}
#header .webmenu .main-menu ul li ul li
{
    display:block;
    float:none;
    background:none;
    margin-right:0;
    padding:0 10px;
    margin:0 0 3px;
}
#header .webmenu .main-menu ul li ul li:hover
{
    background:#333333; 
}
#header .webmenu .main-menu ul li ul li a, #header .webmenu .main-menu ul li ul li a:hover
{
    color:#FFF; 
}

#header .webmenu .main-menu ul li ul li.current-menu-item, #header .webmenu .main-menu ul li ul li.current-menu-parent
{
    background:#333333; 
}
#header .webmenu .main-menu ul li ul li span.sf-sub-indicator
{
    background:url('../images/menu_arrow_sub.png'); background-repeat:no-repeat;
    float:right;
    margin-left:10px;
    width:16px;
    height:16px;
    margin-top:8px;
    text-indent:-9999px;
}

#header .webmenu .main-menu ul li ul.sub-menu li ul.sub-menu
{
    position:absolute;
    left:-999em;

    /* corners */
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;

    background:#007E63;
    padding:5px;
    height:auto;
    width:200px;
}
#header .webmenu .main-menu ul li ul.sub-menu li:hover ul.sub-menu
{
    left:200px;
    top:0;
}

jQuery

$('ul.menu').superfish({ 
        delay:       1000,                            // one second delay on mouseout 
        animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
        speed:       'slow',                          // faster animation speed 
        autoArrows:  true,                           // disable generation of arrow mark-up 
        dropShadows: false                            // disable drop shadows 
     });

I appreciate any help you can provide !

http://www.stylishmedia.co.uk/ak/

here is the link to a test version

Ok this took a while to totally debug, the main thing with Superfish is that your menu should be working BEFORE adding the Superfish enhancements, yours wasn't, from their own documentation (with my bold):

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements

Original Issue

The reason that you were getting the delay in effect is because you didn't apply the li.sfHover rules in the CSS to the same places that the li:hover was also used e.g.

#header .webmenu .main-menu ul li:hover,
#header .webmenu .main-menu ul li.sfHover
{
    background:url('http://www.stylishmedia.co.uk/ak/wp-content/themes/AshtonKlein/library/images/menu_current.png') repeat-x;
}

do that in every place the li:hover is called and your original problem is fixed

Other things picked up along the way

I found it hard to debug this because IE wasn't working at all without the script, but once I got it working e.g. IE7 and below didn't like the float: right of the indicator images, It was making the links which held them 100% wide which meant "Ashton Klein", the first link, was 100% of the top menu bar wide and was then throwing all the other menu items into the line below

the solution to this was to absolutely position the images, but this meant the links didn't get wide-enough to "margin" the images from the text, but Superfish also classes these links sf-with-ul so you can add extra right padding to them - and then position the images in the padded space

I changed quite a bit of the sizing of the menu links because it wasn't stable in IE at all, and varied across version as well as browser sometimes the drops were starting too high up the text, in FF they were actually cutting off.. you also can't use display: inherit; (well you should be able to but it's too buggy yet) which was why the menu wasn't reappearing without the script

sorry it's jumbled I think it's best to give the code so you can now take and compare your version with this one to see all the differences..

link to a working example

if you comment out the script at the bottom you will see that it does now work without it too though no fancy delays going on obviously ;)

I do not have IE, but I had a veeery similar problem a while ago. I have not combed your stylesheet, but have a look at what solved it for me: css menu hover "hangs" in chrome & safari

Hope it helps.