Internet Explorer problem with menu hover

Website:

I am encountering an issue with Internet Explorer (9 or lower) where, on hovering over any menu item on the homepage and attempting to select items beyond the first one - for example, hovering over "Shop" and then trying to click on "Brushes" or "Haircare" - the menu disappears.

I have tried various solutions, including CSS hacks and JavaScript changes, but none seem to resolve the problem. The menu functions correctly on Firefox, Chrome, and Safari, indicating that the issue may be specific to Internet Explorer.

Is there a specific fix for this problem in Internet Explorer, or perhaps a CSS hack that I have overlooked?

Edit: I have made modifications to Justus' CSS fiddle to showcase the slidecontent without extraneous code elements - http://jsfiddle.net/eN7sh/14/. Please feel free to experiment with it and identify the root cause of the problem, particularly in IE9.

javascriptcss

Answer №1

It seems like there might be some conflicting code on your website that is causing the issue to occur. I previously created a 3-level menu using only CSS which you can view here: http://example.com/menu

If you are able to replicate the HTML and CSS structure exactly as in the fiddle, it should work fine. Keep in mind that the hover effect for li:hover may not function properly in older browsers like IE7. In such cases, you can utilize JavaScript to dynamically add a classname on hover and work around the issue. Fiddle example: HTML: 

<ul class="main-menu">
  <li ><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a>
    <ul>
      <li><a href="#">Submenu Item 1</a></li>
      <li><a href="#">Submenu Item 2</a>
        <ul>
          <li><a href="#">Sub Submenu Item 1</a></li>
          <li><a href="#">Sub Submenu Item 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS: 

ul.main-menu {
}
.main-menu li {
    float: left;
    position: relative;
}
.main-menu ul {
    position: absolute;
    display: none;
    left: 0;
    top: 1em;
}
.main-menu li:hover > ul {
    display: block;
}
.main-menu ul li {
    display: block;
    float: none;
    white-space:nowrap;
}
.main-menu ul ul {
    left:100%;
    top: 0;
​}​

Answer №2

I took a look at your website in Internet Explorer 8 and everything seems to be running smoothly.

One small suggestion I have for you is to make sure to apply the z-index property on the sub menu items.

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

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

javascriptcsshtml

Unlocking the TypeScript UMD global type definition: A step-by-step guide

I have incorporated three@^0.103.0 into my project, along with its own type definitions. Within my project's src/global.d.ts, I have the following: import * as _THREE from 'three' declare global { const THREE: typeof _THREE } Additio ...

javascripttypescriptthree.jstype-declaration

How to implement variables within the .map() function in JavaScript?

I am working on a map function where I need to pass in a variable as a Key to change the object item key to be based on that variable instead. For example, I want the obj.Salary below to actually represent the salary value when day equals "Day" instead o ...

javascriptjquery

Can you provide some examples of CSS code snippets?

Can someone share some CSS codes similar to :hover that can be used in the : part for different effects? I tried looking it up but couldn't find much, so any help would be greatly appreciated. ...

htmlcsscss-selectors

What could be causing this function to work in Google Chrome, but not in Firefox?

For some reason, in Firefox, this section of the code never returns true. However, it works perfectly fine in Google Chrome. if(restrictCharacters(this, event, digitsOnly)==true) The expected behavior is that if a user inputs a number from 1 to 5 in the ...

javascript

jQuery's find method returns a null value

During my Ajax POST request, I encountered an issue where I wanted to replace the current div with the one received from a successful Ajax call: var dom; var target; $.ajax({ type: "POST", url: "http://127.0.0.1/participants", data: "actio ...

javascriptjqueryajax

Having trouble getting the onClick event to trigger in ReactJS buttons

The buttons are not functioning as expected, allowing for the addition of positive, neutral, or negative feedback. Interestingly, when I added a default button using different syntax to add negative feedback, it worked. This suggests that there may be an ...

javascriptreactjs

Trying to resolve w3 validator error and warning issues

While checking my HTML code using the W3 validator, I encountered an error and warning message: Line 21, Column 23: The ID menuItem was first used here. <li id="menuItem"><a href="#visit">Ten Places to Visit</a></li> ✉ Line 29 ...

htmlcssvalidation

Finding the complete object based on its index

Hey there, I'm looking to access a specific object in my JSON data by using an index. Can anyone guide me on how to do this? Here's a snippet of my JSON data: [{ "rec": ["act1","act2","act3"], "rec2": ["act11","act23","act4"] }] I'm ai ...

javascriptjson

Pull the Bootstrap radio value from hyperlink buttons

Is anyone else having trouble retrieving values of radio buttons using jQuery? Here are the radio buttons in question: <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-warning radio-selector btn ...

javascriptjquery

The suggestions generated by the Google Books API do not align with what I was looking

I'm currently working on creating a book title recommendation system using the Google Books API. However, the results I'm receiving are not as relevant as those found on . For instance, when I search for the keyword "sher" (expecting titles relat ...

javascriptjqueryjsongoogle-apigoogle-books

The inner function of a functional component does not have access to the context value

My current project involves creating a component that can handle a large list of items and display them in chunks as the user scrolls. The goal is to automatically load more items as the user reaches the end of the visible list. However, I've encount ...

javascriptreactjsreact-hooksnext.js

Ways to retrieve information from a intricate JSON structure?

Can anyone help me understand why I am unable to access the data in the detail option of the JSON? My goal is to load the firstName, lastName, and age into a list for each object. var data = { "events": [{ "date": "one", "event": "", "info ...

javascriptjqueryjson

The functionality of Angular's ng-change or ng-click for select elements is not functioning properly

Exploring the concept of ng-change with checkboxes in this example. Check out the live example here Attempting to convert checkboxes into a selection but encountering some challenges. Here is the code snippet: <select> <option ng-model="confi ...

javascriptangularjsangularjs-ng-clickangularjs-ng-change

Error: Trying to access property '1' of an undefined value is not allowed

I'm experiencing a problem that I can't seem to solve. The issue arises after the user logs in. I am using useEffect() to retrieve the user data by using a secret token from localstorage. Everything seems to be working fine - the data, the secret ...

javascriptreactjsarraysreact-hooks

Obtain a unique HTML ID dynamically with Selenium and VBA

I am currently working on automating a web form using Selenium and VBA. The form includes a search box that generates an autogenerated list when a value is entered. While I can successfully input a value into the search box and trigger the javascript to cr ...

javascripthtmlcssselenium-webdriver

Issue encountered when attempting to retrieve elements within an HTA's IFrame

We are currently working on automating an Intranet site using HTA and JavaScript. To bypass the browser security settings, we have implemented an Iframe within the HTA itself instead of opening the site in a browser. Despite being able to successfully logi ...

javascripthtmliframehtapeoplesoft

Attempting to troubleshoot the issues causing my React application to malfunction

Having some trouble with my Spotify project. Every time I search for an artist, I receive an error message saying "illegal redirect_uri." I am also facing a list of coding issues that I am struggling to resolve. Any advice or suggestions would be greatly a ...

javascripthtmlcssreactjs

When trying to fetch data from a React front end using axios, the request body's title is coming back

I am facing an issue where I keep receiving 'undefined' when attempting to console.log(req.body.title). Additionally, when I console.log(req.body), I am only seeing an empty {} returned. My setup involves React for the frontend and express for t ...

javascriptnode.jsreactjsaxios

Tips for implementing filters in Angular2 without using the package field in the console

I am currently experiencing an issue with a filter field in my code. The filter works fine when all the package data is present, however, some items do not have a package field. As a result, I need to filter based on the package name but I am encountering ...

javascriptangulartypescriptfilter