Troubleshooting hidden element display issues in IE7 with JQuery

My show/hide function is not working in IE7, however it works fine in other browsers. Can someone please assist me? Am I doing something incorrectly?

<div id="secondary_nav" class="box">                    
    <ul>    
        <li><a href="">test</a></li>
        <ul class="sub-menu" style="height: 336px; display: none;">
            <li><a href="">test</a></li>            
        </ul>
    </ul>                
</div>

 <script type="text/javascript">
$(document).ready(function() {
    $("#secondary_nav ul li").hover(function() {
            $(this).next(".sub-menu").show();
            $(this).next(".sub-menu").hover(function() {
                    $(this).show();
                }, function() {$(this).hide();}
            );
        },function() {$(this).next(".sub-menu").hide();}
    );
});
 </script>

Answer №1

It is important to first address the issues in your markup. Remember that a sub-menu should be placed within the same li element as the link it corresponds to:

<div id="secondary_nav" class="box">                    
  <ul>    
    <li>
      <a href="">test</a>
      <ul class="sub-menu" style="height: 336px; display: none;">
        <li><a href="">test</a></li>            
      </ul>
    </li>
  </ul>                
</div>

Additionally, there seem to be some errors in your use of $.hover(). It appears that you are nesting hover functions unnecessarily. Let's simplify that code as well:

$(function(){
  $("#secondary_nav > ul > li").hover(
    function(){ $(".sub-menu", this).show(); },
    function(){ $(".sub-menu", this).hide(); }
  );
});

​Check out the working example on Fiddle: http://jsfiddle.net/4KFac/

Answer №2

There is an issue with the HTML code. It is not valid to nest a ul tag inside another ul tag.

Answer №3

Everything is running smoothly on my end http://jsfiddle.net/Ln8ep/1/
Make sure to implement the $(document).ready(function() {

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

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

Arranging and moving list elements without the use of jQuery UI (or any jQuery libraries at all?)

I have been searching for a JavaScript plugin that offers the same functionality as jQuery UI Sortable, which is the ability to drag and drop items to reorder them. In my case, these items are <li> tags. I prefer not to use jQuery UI because it is h ...

Warning: React detects a missing dependency within an interval in the effect

A webpage I developed using React and Next.js has the following structure. import Head from 'next/head'; import { useEffect, useState } from 'react'; import Header from '../components/Header'; export default function Home() { ...

"Efficiently Adding Multiple Files in AngularJS - A Step-by-

I am currently using ngFileUpload to upload files, but it only allows me to upload one file at a time. I would like to be able to upload both an Image File and a PDF File together. Is there a way to upload multiple files at once? Any assistance or guidan ...

Why does the address bar show value changes in IE when using window.location.hash, but the value doesn't change in the DOM when going

Here is a sample JavaScript code that attempts to detect the back button event: document.location.hash="#1"; document.location.hash="#2"; document.location.hash="#3"; function check() { if("#3"!=window.location.hash) { alert("Back button clic ...

js expressive dynamic pattern matching

Hey there! I'm in the process of coding an online store and am currently focusing on implementing the add to cart functionality. My goal is to save product IDs and their quantities in a cookie, which will look something like this: id1:qt1,id2:qt2... I ...

Adding a new value to an array of objects without altering the existing values in ReactJS and NextJS

I have a JSON file containing image names that I need to organize into a Key-Value Object. I am currently using regex to create keys by removing "-img[image No]". However, I am having trouble storing all the image names in the array without overwriting pre ...

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

Error 500 on Firebase: Issue solving "firebase" in "firebase.js" not resolved

Struggling to incorporate Firebase into my latest React project, I keep encountering the dreaded "The development server returned response error code: 500." Despite creating a firebase.js file to house my Firebase configuration details, I am at a loss as ...

Current target in Internet Explorer 10 with Javascript

Encountering a problem with event.currentTarget in IE 10. Two divs are present on the website. The first div contains an image that takes up the entire screen, while the second div is smaller and positioned over the first div. The smaller div has no conte ...

What is the process for layering one image on top of another in HTML?

Don't miss checking out the amazing website wplayout.com. On the homepage, there is a stunning gallery that I want to enhance by adding a "premium" tag image on top of each picture. Currently, the premium image is displayed in the top right corner of ...

NextJS: Retrieve the information in its initial state

Is there a way to retrieve the original format of a value? For example: The values in my textarea are: Name: Your Name Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f980968c8b9c94989095b994989095d79a9694">[email ...

Issues arise with AngularJS showing images fetched from an API

Currently, I am facing an issue where I am trying to display images from a REST API but keep receiving a "error 403" message. Here is the link to my JSFiddle. Please take a look, as I have attempted using both <img src=""> and ng-src='', bu ...

Unable to transmit FormData from a JSP page to a Servlet through jquery-AJAX

Having trouble sending POST data from a JSP file to a servlet using jQuery-AJAX. The servlet is receiving null values in the post request. Although the console on the JSP page displays the correct data, and Firebug in Mozilla confirms that the data is bei ...

Searching on the search bar using Django's object.filter method results in returning Object (1)

Recently, I have been working on a Django website Project that features a database filled with various books. Within the site, there is a search bar that allows users to type in the name of a book and receive results from the database. However, I have enco ...

Tips for fixing ReferenceError: Cookies is undefined

Currently, I'm configuring a modal that will be hidden once the user submits their request. if ( Cookies.get("submitted") && JSON.parse(Cookies.get("submitted")) ) { $("#booking-form-modal").hide(); return true; error page ...

How to reference a ListView control using its DataSource in a C# class

Currently, I have a ListView embedded in a webpage connected to a C# class datasource called CommentsDAO. This class contains the necessary methods to retrieve or delete data from the ListView. While data retrieval is successful, deleting a row proves to b ...

What is the best way to prevent event bubbling in this particular code snippet?

$('#div1').on('click', '#otherDiv1', function(event){ //Show popup $('#popupDiv').bPopup({ modalClose: false, follow: [false, false], closeClass: 'close ...

tips for positioning images and text in the center using css classes

Here's what I currently have: http://jsfiddle.net/nCs88/ Here's my goal: As a beginner, I am struggling to center the button images with the text. Any help would be greatly appreciated as this has been frustrating me for hours. ...

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...