In IE, the hover state of the background color and sub menu is frequently toggling

I've been struggling with this issue all week. I have a CSS dropdown menu that uses both standard lists and content boxes as sub menus. The problem lies in IE, where each LI has an anchor tag that is set to display block in order to fill the parent LI. This allows for hovering and clicking anywhere in the LI to trigger the link's hover and active states.

The issue I'm facing is that in IE, when I hover over the text, the hover state styles are applied correctly. However, if I move the mouse off the text but still within the LI, the hover state keeps flickering on and off (see dev.altech-uk.com).

This constant flickering causes the sub-menus to flash on and off, making it difficult to navigate. This behavior is not seen in FF, Chrome, Opera, or Safari.

Below is the relevant CSS code:

...

I would greatly appreciate any help with this issue.

Thank you

htmlcssinternet-explorer

Answer №1

Eliminate the progid...etc. filter from the div.navBG ul.navMenu >li > a:hover style

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

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: https://i.sstatic.net/lYod8.png One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose t ...

javascriptjqueryhtmlcss

Scrolling in iOS 8 causing flickering problem with background image

Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling. The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering ...

javascriptjqueryhtmlioscss

JavaScript stylesheet library

What is the top choice for an open-source JavaScript CSS framework to use? ...

javascriptcssframeworks

Is it possible to execute the Go compiler within a web browser?

Just discovered that Go can be compiled to WebAssembly. How awesome! According to this Go documentation, the Go toolchain is actually written in Go itself. This got me thinking, is it possible to run the Go compiler in a browser? Can I create a website w ...

htmlgowebassembly

Issue with rollover button function in Firefox and Internet Explorer when attempting to submit

I have created a rollover submit button using HTML and JavaScript: <input type="image" id="join" name="join" src="images/join.png" value="join"> My JS code implements the rollover/hover effect: <script type="text/javascript" charset="utf-8"> ...

jqueryhtmlcss

Can a variable containing HTML code be iterated through with a loop?

I am currently working on setting up a select button that will receive options from an ajax call. The ajax call is functioning properly. However, I am facing a challenge when trying to create a variable containing the HTML. I am unsure of how to iterate a ...

javascripthtmlajax

A guide to traversing a class and pinpointing each element that contains a particular classlist property

Here is my code snippet that generates 4 spans within a class. When a user clicks on a span, it changes color to indicate that it has been clicked. <head> <style> .tagger1010 span { padding: 6px 10px; ...

javascripthtmlcss

Is there a way to maintain the vertical alignment of spans within an HTML div after numerous drag and drop operations have taken place?

Recently, I created a JavaScript program (code provided below) to enable the dragging and dropping of <span> elements containing Greek characters within a basic <div> container. Upon initial page load, everything appears perfectly aligned vert ...

htmlbrowserdrag-and-dropdraggablevertical-alignment

Liquid 960: Bizarre Alpha/Omega Phenomenon

Currently, I am working with Fluid 960 and encountering some unexpected behavior with alpha/omega. Typically, I utilize alpha/omega to adjust left and right margins within nested grids. Oddly enough, when I use alpha/omega on a set of nested grids, the gr ...

css960.gsfluid-layout

Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space. While this setup works well when the content ...

htmlcsshtml-table

Avoid constantly destroying the Bootstrap Popover

I am facing a challenge with retrieving data from two checkbox inputs inside a popover. The issue arises because the popover appears in the DOM when I click a button, but is removed when I click it again. It seems that the problem lies in the fact that Jav ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on: /* valuecanvas */ #wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; bac ...

htmlcss

Utilize Selenium with Eclipse (Java) to validate the CSS table border style

I'm currently conducting a form test that involves leaving mandatory fields empty to verify if the field displays a red border indicating it needs to be filled before proceeding. Below is the code snippet I have implemented so far: driver=new Firefox ...

javacssseleniumassert

Using AngularJS ng-repeat to pass href links

I am facing an issue with displaying hyperlinks in a list of messages obtained from server response using AngularJS. $scope.messages = [] When a button is clicked, the content of a text area is added to the array using ng-click method. This message is th ...

javascriptjqueryhtmlangularjs

Efficiently Fill JQUERY Mobile Multi-Pages with Dynamic Content

A Question for JQUERY Mobile Beginners: In my basic JQUERY Mobile application, I have a simple setup with two pages. When the user navigates to PAGE2, I need to make an AJAX call to retrieve a JSON object that contains a list of people along with their DB ...

javascriptjqueryhtmlajaxjquery-mobile

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

javascriptjquerycsscalendar

The height property in the CSS is causing the parent element to break and cannot be confined

Here is the HTML code that I am currently working with: <div id="div1"> <p id = "a"> <! -- content --> </p> <p id='b'> <! -- content --> </p> </div> Additionally, th ...

cssheight

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...

javascriptcssreactjsmaterial-uistyled-components

`In Internet Explorer, dropdowns in AngularJS ng-repeat are not displaying properly.`

I am facing an issue with rendering a list of components with dropdown controls in IE10. Even though it works perfectly fine in Chrome and Firefox, the dropdowns don't display correctly in IE10. When I have the following code: <select ng-model="se ...

angularjsinternet-explorerangularjs-ng-repeat

Guide to aligning MEGA MENU with navbar

I've implemented a navbar that includes dropdown nav-items with a mega menu. The mega menu is set to position:absolute. Is there a way to dynamically align the mega menu in the center of the page while using the same component for all nav-items? Ch ...

htmlcssbootstrap-4sassmegamenu