Submenu Positioning Problem Identified in Firefox Display

I am currently working on a menu design for a website and encountered an unusual issue while testing it in Firefox. In the provided fiddle link, you can view the menu layout where hovering over the information button should display a submenu directly below it. This functionality works correctly in Chrome and IE; however, in Firefox, the menu appears shifted to the left. I suspect that this problem might be related to the combination of 'Display: table' and absolute positioning of the submenu, but I'm not entirely sure.

Click here to view the menu live

The relevant HTML code snippet is as follows:

<li class="item262 parent root">
            <span class="daddy item bullet nolink"><span>Information</span></span>

            <div class="fusion-submenu-wrapper level2"
                 style="width:180px;">
              <ul class="level2"
                  style="width:180px;">
                <li class="item263"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=263">
                <span>Choosing a Property</span></a></li>

                <li class="item264"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=264">
                <span>Downloads</span></a></li>

                <li class="item265"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=265">
                <span>FAQs</span></a></li>

                <li class="item266"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=266">
                <span>Moving In</span></a></li>

                <li class="item267"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=267">
                <span>Protecting Your Deposit</span></a></li>

                <li class="item268"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=268">
                <span>Repairs</span></a></li>
              </ul>

              <div class="drop-bot"></div>
            </div>
          </li>

Here is the associated CSS code:

.menutop li {height: auto;margin: 0;padding: 0;position: relative;list-style: none;}
.menutop em {font-size: 80%;font-weight: normal;display: block;font-style: normal;}
...
(remaining content pasted)
...
htmlcssfirefox

Answer №1

Here are some suggestions to improve your code: To enhance visibility, consider removing left: -999em; and adding display:none; in the class 

.menutop li .fusion-submenu-wrapper
. You may also want to remove 
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
. Lastly, adjust 
.menutop li.root:hover > .fusion-submenu-wrapper {left: 0;}
to 
.menutop li.root:hover > .fusion-submenu-wrapper {display: block;}
. For a demonstration, check out this DEMO.

Answer №2

I have successfully resolved the issue for you. To implement the fix, please make use of the following CSS code:

<style>
.menutop li {
    float: left;
    height: auto;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 200px;
}
.menutop em {
    font-size: 80%;
    font-weight: normal;
    display: block;
    font-style: normal;
}
.menutop li .item, .menutop li.active .item {
    display: block;
    margin: 0;
    text-decoration: none;
    float: none;
    width: auto;
}
.menutop li .fusion-submenu-wrapper {
    float: none;
    left: -999em;
    position: absolute;
    z-index: 500;
}
... (CSS code continues) ...

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

Conceal the initial modal beneath the overlay when the second modal is activated

I have a situation where I am using a modal that contains a button to trigger a second modal. The issue is that the overlay of the second modal does not hide the first modal, it simply darkens the background. How can I make the overlay of the second modal ...

jquerycsstwitter-bootstrapmodal-dialogoverlay

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

javascriptcssanimation

React Nested Grid with Material-UI

https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...

cssreactjsgridmui

The HTML password input continues to respond to key bindings, even when other inputs are not affected by the bindings

In the ongoing development of a legacy react application, I encountered keybindings that are causing unexpected behavior. For instance, pressing the "F" key triggers the full screen mode within the app. However, this keybinding is inadvertently active for ...

htmlreactjsinputkey-bindings

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

htmlcsstailwind-css

A compilation of approved classes for the quill toolbar

The instructions provided in the documentation for the quill module indicate that you can manually create a toolbar using HTML, and then pass the corresponding DOM element or selector to Quill. This will result in the ql-toolbar class being added to the to ...

javascripthtmlquill

Guide to efficiently utilizing flex to horizontally position two elements next to each other in a Material UI and ReactJS environment

I have successfully achieved side-by-side components of two cards from Material-UI. However, I am facing an issue when expanding one of the cards. The problem is that Card 1 automatically expands to match the size of Card 2 when Card 2 is expanded, even th ...

javascripthtmlreactjsflexboxmaterial-ui

Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

I want to eliminate the empty space within the container while maintaining some spacing around the black box, and ensure responsiveness. Additionally, how can I shift the container with its content downwards and to the right of the webpage, while still ke ...

cssflexboxbootstrap-5

Styling Collapse Text in Bootstrap Framework

I have a question about the "Accordion example" in the Bootstrap Collapse Component. My query is regarding removing the underline from the text "Collapsible Group Item" 1-3 when they are activated. Normally, this text is not underlined, but upon hovering, ...

htmlcssbootstrap-4

Obtaining the Date Value from an HTML5 Input Field with the type="date"

In this interface, users have the option to select a starting date (fromdate) and an ending date (todate) from the form below: <html> <form name="frmSearch" method="post" action="searchdate2.php"> <label> From date </label> ...

phpjqueryhtmlmysqldate

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

javascriptcss

Altering webpage content through the use of Ajax

I need a solution for dynamically updating web page content using JavaScript AJAX. One idea I had was to store different div layouts in separate files, like so: BasicDiv.div: <div> <p>Some Text</p> <button> A Button </ ...

javascripthtmlajax

JSOUP is cleverly filtering out specific tags while navigating through the HTML tree

While attempting to navigate the HTML tree of a Wikipedia page, I noticed that certain blocks of HTML elements in the code are being omitted. Is there a way to prevent these omissions? CODE Document doc = Jsoup.connect(url).timeout(10000).userAgent(USER_ ...

javahtmlweb-scrapingjsoup

Styling errors with jQuery validation

How can I remove the borders in ul > li elements? Here is my current setup: errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', errorContainer: $('div.error'), I have tried the following: div.message{ backgr ...

jquerycssvalidation

Discover the sleek and modern concept of transparency in Microsoft's

I'm interested in incorporating Microsoft Fluent Design transparency into my webpage. Are there any CSS or other tools that can help achieve this design language? I want to enhance the look of my site with these elements. ...

transparencyhtmlweb-platformsfluent-design

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: with this new link: without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restriction of needing at least 10 reputation points in order to post more t ...

javascriptjqueryhtmlcss

Activate Jquery as the user navigates through it with scrolling

Is there a way to activate a JQuery event when the user first scrolls over a particular div? I attempted to utilize waypoint for this purpose, but unfortunately, it did not work as expected. Below is the code I used with no errors: var waypoints = $(&apo ...

javascriptjqueryhtml

Issue with line height using Material-UI grid alignment: Ensure line heights are unitless for proper alignment

Encountering a common error in ReactJs projects: Error: Material-UI: unsupported non-unitless line height with grid alignment. Use unitless line heights instead. A snippet of the code where the error occurs: const breakpoints = createBreakpoints({}); le ...

cssreactjsmaterial-ui

Tips for achieving a unique look with CSS: Transforming border radius colors in four distinct sections

Is it possible to create a gradient border with multiple colors using border radius? div { border-radius: 30px; width: 60px; height: 60px; border: 1px red solid } Hello <div> </div> I am looking to achieve a unique effect on my bord ...

cssborder

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

htmlcssasp.netasp.net-mvctwitter-bootstrap