Superfish Dropdown Menu in Internet Explorer

Hey everyone, I'm having some trouble with drop-down menus on my website. They are working perfectly except for in IE.

I've been trying to troubleshoot for the last couple of hours, but I just can't seem to figure out what the issue is.

I'm using superfish for the menus, and the problem I'm encountering is that when you mouse off the link, the menu stays on the screen for about 2-3 seconds and it's slightly out of position.

I've attempted some CSS fixes on the ul, but it only applied to the jQuery drop-down menu, not the instance that remains visible.

Check out these images to see exactly what's happening:

(Image 1)

(Image 2)

Here's the HTML and CSS for the menu:

Markup

(HTML code here)

CSS

(CSS code here)

jQuery

(jQuery code here)

Any help or suggestions would be greatly appreciated!

Here is a link to a test version of the website

jquerycssinternet-explorersuperfish

Answer №1

After spending a considerable amount of time debugging, it became clear that the issue with Superfish stemmed from the menu not functioning correctly before the Superfish enhancements were added. According to their documentation (emphasis mine):

Superfish is an enhanced Suckerfish-style menu jQuery plugin that utilizes an existing pure CSS drop-down menu (thus degrading gracefully without JavaScript) and incorporates sought-after enhancements.

Identified Problem

The delay experienced was due to the li.sfHover rules not being applied in the CSS alongside the li:hover usage. To resolve this, adjust the CSS as follows:

#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;
}

Apply this in all instances where li:hover is called, and the original issue should be resolved.

Additional Observations

Further debugging revealed that Internet Explorer was non-functional without the script. Issues such as inconsistencies with float: right causing layout problems and menu sizing inconsistencies across browsers were rectified. Making adjustments to menu link sizing and positioning of indicator images helped stabilize the menu appearance.

For a comprehensive comparison between your version and the resolved code, refer to the provided link to a working example.

By commenting out the script, you can observe that the menu now functions without delays, albeit without the added enhancements.

Answer №2

While I don't use IE, I encountered a very similar issue in the past. I didn't thoroughly inspect your stylesheet, but what worked for me was checking out this resource: css menu hover "hangs" in chrome & safari

Hopefully, this solution will be useful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After the loop completes, only the last row is inserted

Here is the issue I am facing with my info.php file. I am extracting the steam_id from the scammers table in this file. The problem arises when I display the results on the front page because all player parameters turn out to be the same. This happens beca ...

phpjqueryjson

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

I'm working on creating a CSS flex image gallery that adjusts the width of the images based on the container size: HTML: <div class="grid-container"> <div class="grid-item"> <img src="small-thumb-dpi.jpg" /> < ...

htmlcssflexboximage-gallery

Combining Images and Navigation in Next.js using Tailwind CSS

I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected. What I want is for the image to remain below the dropdown menu when it is ...

javascriptcssnext.jstailwind-css

Dynamic properties in JQuery

Here is the HTML DOM element I have... <input type="text" style="width: 200px;" id="input1"/> I want to make sure it stores date values. How can I specify that in the DOM element? Please provide your suggestions. Thanks! ...

javascriptjqueryhtml

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

javascripthtmlcssbootstrap-4

The form created using jQuery is not submitting correctly because the PHP $_FILES array is empty

Creating an HTML form dynamically in jQuery and submitting the form data via Ajax to 'add_sw.php' for processing is my current challenge. However, I have encountered an issue where the PHP script cannot access the PHP $_FILES variable as it turn ...

javascriptphpjqueryhtmlajax

Why is there a CSS reference failure in Express and how can it be resolved?

Below, you'll find a simple express server I've put together: // check out my basic Express server var express = require("express"); var app = express(); var bodyparser = require("body-parser"); app.use("/public/", express.static("./public/")); ...

javascriptcssnode.jsexpress

Using jQuery to append a single AJAX response at a time

I wrote a piece of code that utilizes an ajax request to communicate with json-server, retrieving data which is then displayed in an html div using jquery .html(). The content shown in the div depends on the button clicked by the user. While .append() work ...

javascriptjqueryhtml

Styling based on conditions, hovering effects, and implementing ReactJS

One issue I am facing is with an anchor element within a <div>. The anchor has conditional background styling, which seems to override the a:hover style. Whether I have conditional or fixed coloring, removing the background-style from component.js al ...

cssreactjs

Tips on attaching a suffix icon to a material-ui-pickers input box

Here is a snippet of my code: <Box p={6}> <Grid container spacing={2}> <Grid item xs={6}> <TimePicker autoOk label={t('checkIn')} value={time1} onChange={handlecheckIn} clearable /> </Grid> < ...

javascripthtmlcssreactjsmaterial-ui

The images on the carousel fail to load unless I adjust the window size

After investing countless hours into finding a solution, I am still unable to resolve this issue. The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image ...

javascripthtmlcssswiper.js

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

javascripthtmlcssreactjs

Creating a Circular Design with Text at the Center Using CSS

I'm facing a challenge with this https://i.sstatic.net/zQiF8.png The alignment of the icon is off. I would like to adjust it slightly upwards for better presentation. Below is my HTML (angular): // Icon component <div> <i><ng-c ...

htmlcssangular

Tips for resizing a Shiny Dashboard to accommodate various screens

I created a shiny app with a specific layout on my desktop computer that fits perfectly on the screen. However, when I run the app on my notebook, only the top left boxes are visible, making the app too large for the screen. Even after resizing with Ctrl ...

cssrshinyshinydashboard

Tips for transferring complete HTML content within a JSON payload

I've been working on a jQuery script to convert an entire HTML page into JSON text. My goal now is to transform this code into a JSON string. In the resulting JSON: The 'text1' value will store the complete HTML in a single string format ...

javascriptjqueryhtmljson

"Encountering an 'Unexpected string' error when trying to implement a

$('.star').mouseover(function (){ var starIndex = $(this).index()1; $(this).parent().css("background-position", "0 -" + (32 * starIndex) + "px"); }); $('.star-rating').mouseout(function (){ var originalResult = $(this).attr ...

javascriptjquery

Can anyone help me with coloring Devanagiri diacritics in ReactJS?

I am currently working on a ReactJS project and I have come across an issue. I would like for the diacritic of a Devanagiri letter to be displayed in a different color than the letter it is attached to. For example: क + ी make की I was wondering ...

javascripthtmlcssreactjstypescript

Adjust the background hue of the Row in the Table

Is there a way to update the background color of a Table Row? I attempted using "BackgroundColor" but didn't see any changes Any suggestions on how to fix this issue? <TableRow style={{ backgroundColor: "#FF0000" }}> <TableCell& ...

cssreactjsmaterial-uireact-table

JavaScript not functioning properly with HTML loaded via .load()

I'm facing a perplexing dilemma: My issue revolves around this JS code: EDIT updated JS $(".img-thumb").on("click", function(){ // displaying the same behavior as .click() thumbID = $(this).attr("id"); console.log(thumbID); $(".gal-act" ...

javascriptjquery

What is the best way to center my text vertically in each line?

I'm encountering an issue with aligning my text vertically in two lines within a <p> tag. I am trying to position the second line at the bottom of my <div>. I experimented with using vertical-align: bottom and text-bottom along with the to ...

htmlcss