CSS Drop-Down Menu Fails to Function Properly in Firefox and Internet Explorer

Can you help me with this issue I'm having with my website design? In Google Chrome, Opera, and Safari, everything looks great. But in Firefox and the latest version of IE, it's a different story.

Here is the HTML code:

<div id="navbar">
    <ul>
        <li class="selected">
            <a href="index.html">HOME</a>
        </li>
        <li>
            <a href="#">OUR FACILITIES</a>
        </li>
        <li>
            <a href="#">ABOUT US</a>
            <ul>
                <li>
                    <a href="#">MEET THE STAFF</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">CONTACT US</a>
            <ul>
                <li>
                    <a href="#">RESERVATIONS</a>
                </li>
                <li>
                    <a href="#">DIRECTIONS</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

This is my CSS code:

#navbar {
    margin-top: 87px;
}
#navbar ul {
    list-style: none;
    background-color: transparent;
}
#navbar ul li {
    font-family: magic;
    font-size: 1.6em;
    background-color: #85CE85;
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 45px;
    padding-right: 45px;
}
#navbar .selected {
    background-color: #CCFFCC;
}
#navbar ul li ul {
    display: none;
    background-color: transparent;
    width: 245px;
    height: 130px;
    margin-top: 20px;
    margin-left: -85px;
    font-family: SkyHaven;
    font-size: .7em;
}
#navbar ul li:hover > ul {
    display: inline-block;
    position: fixed;
}
#navbar ul li ul li {
    width: 175px;
    border-top: 1px black dashed;
    background-color: #85CE85;
}
#navbar ul li ul li:hover {
    background-color: #6699FF;
}
#navbar ul li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}
#navbar a:hover {
    color: white;
    transition: .2s;
}
#navbar li:hover {
    background-color: #CC0000;
    transition: .8s;
}

If you can provide any insight or suggestions on how to fix this compatibility issue, I would greatly appreciate it. Thank you!

Answer №1

This has been modified:

#navigation ul li:hover > ul {
visibility: visible;
position: relative;
}

It appears to be functioning correctly in my Firefox browser. How does it appear on your end? Check out the Fiddle

Answer №2

Does this answer your query?

http://example.com

To display the dropdown menu correctly, follow these steps:

position:absolute;
top:100%;
left:0;

Make sure to set the parent li element to relative position.

Answer №3

Below is the updated code that should work seamlessly for you:

http://codesandbox.io/anon/pen/MbqgL/

I recommend using modernizr to prevent any compatibility issues with Internet Explorer:

modernizr

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

Continuous Div Carousel with Looping in jQuery

I have developed a basic carousel to cycle through a series of divs, but I am facing some issues. I want the carousel to loop continuously so that after reaching "slide 07," it goes back to "slide 01." Unlike using a carousel plugin, I prefer having an ove ...

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Following the advice in the official PhpStorm documentation, I have implemented a CSS minifier. However, upon attempting to use it, I encountered the following error: cmd.exe /D /C call C:\Users\douglas\AppData\Roaming\npm\css ...

What causes the disruption of vertical alignment among inline-block elements when using overflow:hidden?

Take a look at these two JSFiddles: http://jsfiddle.net/am28dsbz http://jsfiddle.net/am28dsbz/1/ Why is it that the first one shows my text aligned correctly, while the second one displays the first link lower than the second? Stack Overflow requires m ...

Is there a way to switch an input's appearance to resemble that of a label?

Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...

Creating a dynamic tbody element on button click with the help of javascript or jquery

I am working with the following code: $(document).ready(function() { //Optimizing by selecting tbody first using jquery children var tbody = $('#myTable').children('tbody'); //If no tbody found, select the table itself ...

Verify login availability using Javascript auto-check

For quite some time now, I've been grappling with a significant issue that has been consuming my attention. I am determined to implement an auto-check login availability feature in the registration form of my website. My goal is for it to verify the ...

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

Utilize JSON data fetched from a URL to dynamically populate an HTML content

There is a JSON file located at a URL that looks like this: [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124", "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank" ...

Substitute HTML data attributes

Hey everyone, I'm wondering how to change a data attribute in my code. For example, I am currently using a script for a video background, but I want to replace the video with a lighter version when viewed on a mobile device. In my JavaScript file, I h ...

Steps to display text in a div upon clicking on an image

I am trying to create an image with two DIVs separated by a black line. The left DIV will contain 4 images, and I want the following functionality: When a user clicks on any of the buttons in the left DIV, a corresponding text should be revealed in the ri ...

Is it possible to extract style information using Selenium WebDriver in Python?

I am currently attempting to extract the specific typography used by a company on Stylify Me (e.g. for I am interested in retrieving "UberMove, 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif, normal, 52px, 56px, #000000"). Howeve ...

What is the best way to obtain the true dimensions of an HTML element?

Is there a way to determine the dimensions of a <div> element in order to accurately position it at the center of the browser window? Additionally, which browsers are compatible with this method? ...

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to ...

Achieving Perfect Alignment in HTML Tables

I have created a simple HTML table and I am trying to center it vertically in the middle of the page based on the user's device height. So far, I have tried adding a div with 100% height and width, positioning the table at 50% from the top and left, b ...

What is the best way to combine 4 small triangle pieces in order to create one large triangle?

Is there a way to create an image background with triangle shapes by combining small triangles together? I am interested in making this collection of triangle image backgrounds. Can someone guide me on how to do it?! .block { width: 0; height: ...

What is the best way to conduct automated tests on CSS rendering across various browsers, including Safari Mobile and the Android Browser?

Is there a way to programmatically and automatically test how CSS is rendered in various browsers, similar to how Selenium tests HTML and Javascript across different browsers? It would be great to integrate this with a BDD framework. ...

Unable to style table borders using CSS

I'm having trouble getting the borders to show up on my tables in my application. I added the "border: solid 2px black" line to my CSS, but nothing seems to be changing. Can anyone point out what I might be doing wrong? Here is my CSS: table { ma ...

How to efficiently transfer dynamically generated table row data to JavaScript for database submission using the POST method

Currently, I am working with Laravel and facing an issue related to dynamic rows in my form. Each row has its own form with unique values. My goal is to pass the form data along with values to JavaScript when the submit button is clicked without refreshin ...

HTML - Selecting Different Values in One Drop Down Based on Another Drop Down

When selecting "First Year" in the initial drop-down menu, the options "Sem1" and "Sem2" should be displayed in the second drop-down menu. Similarly, when choosing "Second Year" in the first drop-down menu, the choices "Sem3" and "Sem4" should appear in th ...