Issue with CSS Dropdown Menu Functionality on Internet Explorer versions 7, 8, and 9

My CSS dropdown menu works perfectly in Mozilla, Chrome, and Safari. However, it's a bit finicky in IE10 (still works) and doesn't work at all in IE9.

I've tried to troubleshoot the issue, as there are websites with CSS dropdown menus that function smoothly in IE.

You can view the code here: http://jsfiddle.net/xZuDC/

The images show:

  1. Normal Menu in Chrome

  2. Menu in IE

List:

<ul class="ulrRight">
    <li><a onclick="your_name">Your Account</a>
        <ul id="your_name">
            <li><a href="/index.php?f=mydetails">Details</a></li>
            <li><a href="/index.php?f=mypassword">Password</a></li>
        </ul>
    </li>
</ul>
htmlcssinternet-explorercross-browser

Answer №1

I have successfully tested the changes I made in IE9 and it seems to be working fine.

The issue causing the fiddle not to work was a simple typo, <ul class="ulrRight"> had an extra 'r' after 'ul'.

It appears that jsfiddle doesn't function properly in IE 8 and older versions, especially in the browser console's view.

You can view the updated fiddle with my modifications by following this link:

fiddle

To make the code cleaner, consider structuring it like this:

<div class="dropDown">
  <ul>
      <li>Your Account
          <ul>
             <li>Details</li>
              <li>Password</li>
          </ul> 
      </li>
      <li>Help
          <ul>
              <li>Support</li>
              <li>Contact Us</li>
              <li>Client FAQ's</li>
              <li>Haulier FAQ's</li>
          </ul>            
      </li>
      <li>Logout</li>
  </ul>
</div>

CSS

.dropDown {
  width: 500px;
  height: 60px;
  margin: 0 auto;
  background: mediumSeaGreen;
}

.dropDown > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropDown > ul > li {
  float: left;
  width: 33.3333%;
  line-height: 60px;
  text-align: center;
}

.dropDown > ul > li:hover {
  background: #1b1b1b;
  color: #fff;
}

.dropDown > ul > li:hover > ul {
  display: block;
}

.dropDown > ul > li > ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

fiddle for code

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

PHP - Extract Information from Table Upon Form Submission without User Input

I'm facing a challenge with my web form that includes a table allowing users to delete rows before submitting. Although there are no input fields in the table, I need to capture the data from these rows when the form is submitted. The issue is that th ...

javascriptphphtml

Side Menu with Fixed Position Created with Tailwind CSS

Can anyone help me create a social media sidebar that stays fixed on the bottom right side of the screen, regardless of its size? Currently, the sidebar moves when I scroll down, but I want it to remain in place. How can I achieve this fixed positioning? ...

htmlcsstailwind-css

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

javascriptjqueryhtmljquery-ui

The navigation buttons in Flexslider can't be seen when hovered over, accompanied by an orange box

Currently, I am incorporating FlexSlider 2 into a WordPress website. I am facing an issue where the back and forth navigation buttons are not functioning properly. The back navigation button appears as just an orange box, and the forward navigation button ...

javascriptjquerycsswordpressflexslider

What is the best way to transfer the window object from the current tab to the extension?

I am looking to retrieve user storage data (local and session) from a specific tab, similar to what is shown in this app (see screen below). From my understanding, I need to access the window object of the active tab. While I have obtained the object, I a ...

javascripthtmlgoogle-chromegoogle-chrome-extensionstorage

Scraping Data: Uncover JSON data embedded in HTML code

I need help extracting what appears to be JSON data embedded within an HTML script. The script is presented like this on the webpage: <script> $(document).ready(function(){ var terms = new Verba.Compare.Collections.Terms([{"id":"6436","name ...

pythonhtmljsonxpathscrapy

Issues with scrolling navigation have been identified in IE8

I am puzzled by the fact that the main navigation on this website is not functioning in IE8. redacted The code for the navigation is quite simple, with a localScroll feature attached to enable the scrolling effect. <ul> <li><a href=" ...

htmlinternet-explorer-8

Having trouble setting the CSS width to 100%

Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...

javascriptcsstestingbddnightwatch.js

Choosing default value in edit form in CakePHP while using virtual fields

In my edit form, I have successfully pre-selected values without any issues. However, there is a select input field that contains objects from the class ContactPerson. To display the prename and lastname in the view, I created a virtual field called fullna ...

phphtmlcakephpmodel-view-controller

Adjust image placement when resizing the window or rotating a mobile device

When the window is maximized or the phone is in portrait position, the magnifying glass stays in its place. However, when I resize the window or rotate the mobile phone, the position of the magnifying glass changes. I've tried using different units ...

htmlcss

What is the best way to compare the position-x of two components that are aligned on the same line?

Check out this code snippet: <input id="homebutton" type="image" style="display:inline" src="home.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html&apos ...

javascripthtmlcss

How to create a looping animation effect for a div using CSS on hover

Using Bootstrap framework with Wordpress site .test { position: absolute; z-index: 9; left: 50%; height: 10em; width: 10em; margin-left: -5em; background-size: cover; opacity: 0; transition: opacity 0.5s ease; transform: translateY(- ...

javascriptjqueryhtmlcss

Troubleshooting: Issue with detecting keypress using jQuery

Currently, I have a jQuery script that checks password strength and changes an image source based on complexity. The functionality works smoothly within jsFiddle (set to jQuery 1.91), but when implemented on my webpage, the event seems to not be triggered. ...

javascriptjqueryhtml

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

Ways to determine the current page I am viewing

I am working with a list of tabs and I need to track my current location every time I click on a specific tab. My MainCTRL controller, which is the parent of all tab controllers, needs to be aware of the active tab at any given moment. I attempted to use n ...

javascriptjqueryhtmlcssangularjs

When updating the location.hash property via a click event, it appears to be set to

Check out the code snippet below: $(e).click(function() { console.log(this.href); location.hash = this.href; }); In this code snippet, e refers to a <li> element structured like this: <li href="#about">About</li> The location. ...

javascripthtmlundefined

Change the structure of the content in a div

Seeking assistance with a slider code that switches between two dividers, previous and next. Each divider currently displays ten images in two parallel vertical lines. I am attempting to modify the layout so that each divider showcases five images on two p ...

javascriptjqueryhtmlcss

increasing the size of a picture without resorting to a pop-up window

Struggling to implement a product details tab within a table that features a clickable image. When the image is clicked, it should enlarge but the width doesn't adjust accordingly. I'm using bootstrap 5.3 and can't seem to identify the root ...

javascripthtmlcssbootstrap-5

javascript Incorrectly using location.reload will not refresh the page as intended

My goal is to refresh a page every time a user clicks a button so the page reverts back to its original source code. However, I am facing an issue where the location.reload() function is being executed after the code instead of at the beginning. btn.addEve ...

javascripthtmlonclickonclicklistenerreload

Tips for restricting the size of inserted content in a contentEditable paragraph

I am in need of a one-line editable paragraph that can contain text without overflowing its size. Currently, I am using CSS to hide the overflow and prevent multiple lines by not displaying the children of the paragraph. However, what I really want is fo ...

javascripthtmlcssoverflowcontenteditable