Databases
StackOverflow2013
Postsdbo
POSuperfish Drop Down Menu's IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSuperfish Drop Down Menu's IE
    text
    copied!<p>I am using drop down menu's on a website they work perfectly except for IE.</p> <p>I have spent the last two hours trying to figure this out but i just cant seem to work out what the issue is.</p> <p>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.</p> <p>I tried css fixes on the ul but it only applied it to the jquery drop down not the instance that remains.</p> <p>These images illustrate what is happening;</p> <p><img src="https://i.stack.imgur.com/xphGj.jpg" alt="Navigation working correctly"></p> <p><img src="https://i.stack.imgur.com/2fXDJ.jpg" alt="After image of the menu"></p> <p>Here is the css / html for the menu;</p> <h1>Markup</h1> <pre><code>&lt;div class="main-menu"&gt; &lt;div class="menu-header"&gt; &lt;ul id="menu-main" class="menu sf-js-enabled"&gt; &lt;li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"&gt; &lt;a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/"&gt; Ashton Klein &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt; &lt;/a&gt; &lt;ul class="sub-menu" style="visibility: hidden; display: none;"&gt; &lt;li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"&gt; &lt;a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/about/"&gt; About &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt; &lt;/a&gt; &lt;ul class="sub-menu" style="visibility: hidden; display: none;"&gt; &lt;li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/about/who-we-are/"&gt;Who we are&lt;/a&gt; &lt;/li&gt; &lt;li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/about/our-vision/"&gt;Our Vision&lt;/a&gt; &lt;/li&gt; &lt;li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/about/our-commitment/"&gt;Our Commitment&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"&gt; &lt;a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/opportunities/"&gt; Opportunities &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt; &lt;/a&gt; &lt;ul class="sub-menu" style="display: none; visibility: hidden;"&gt; &lt;li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/opportunities/careers/"&gt;Careers&lt;/a&gt; &lt;/li&gt; &lt;li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/opportunities/franchising/"&gt;Franchising&lt;/a&gt; &lt;/li&gt; &lt;li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/opportunities/marketing-opportunities/"&gt;Marketing&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"&gt; &lt;a href="http://wp.ashtonklein.com/ashton-klein/newsroom/"&gt;Newsroom&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h1>CSS</h1> <pre><code>#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; } </code></pre> <h1>jQuery</h1> <pre><code>$('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 }); </code></pre> <p>I appreciate any help you can provide !</p> <p><a href="http://www.stylishmedia.co.uk/ak/" rel="nofollow noreferrer">http://www.stylishmedia.co.uk/ak/</a></p> <p>here is the link to a test version</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload