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

What are the steps to ensure that the content within the <pre><code></code></pre> tags displays correctly in Internet Explorer 7?

When using JQuery to make an AJAX pull with JSON to an ASP.net Web Service, the following code is used: $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "TestWebService.asmx/Foo", data: "{}", dataType: "json", success: function( ...

asp.netjqueryhtmlinternet-explorerline-breaks

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

Searching for a particular string, selector, or XPath on numerous web pages using the "inspect element" browser tool - what is the best approach?

Hey everyone, I hope you're all having a fantastic day. I'm wondering, is there a way to search for an element across multiple web pages simultaneously, rather than just one page at a time? The goal is to locate a specific string or code (like ...

htmlsearchbrowserprinting-web-pageinspect-element

Inline CSS alignment

While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference? I have applied the following CSS to both HTML structures: .time { position: relative; top:100px; heigh ...

layoutcss

Achieve a div to fill the remaining width while using list-style-position: inside

I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me. While I could opt for list-style-position: outside and add some spacing to avoid ...

htmlcss

Dynamically loading a webpage with an element roster

I have a list and I want it so that when a user clicks on the sport1 list item, results from the database table sport1 will be displayed. Similarly, if they click on the education1 list item, results from the education1 table should be shown. The issue i ...

javascriptphphtmlmysqlajax

Creating personalized HTML with a script source

Having trouble using my custom HTML file as a script src: function(){ var ctx; function setupCanvas(setupVariable){ ctx = setupVariable; }; function circ(x, y, lps, wps, fill, outline){ if(outline === true){ ...

htmlsrc

Ways to adjust the size or customize the appearance of a particular text in an option

I needed to adjust the font size of specific text within an option tag in my code snippet below. <select> <?php foreach($dataholder as $key=>$value): ?> <option value='<?php echo $value; ?>' ><?php echo ...

javascriptphpcsshtml

Developing jpg/png images from .ppt/pptx files with Django

I currently have a PowerPoint file saved on Dropbox at "". My goal is to convert this presentation file into individual slide images (jpg/png..) within my Django template or using a Django def function. Once I have converted the slides, I plan to utilize ...

pythonhtmldjango

What is causing the collapsed-animation to malfunction in Vue3?

Why won't the transition animation function in vue3js? The animation does not appear to be working for me. I've implemented this library https://github.com/ivanvermeyen/vue-collapse-transition <template> <nav class="navbar color-d ...

cssvuejs3

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...

javascriptjqueryhtmlkeyup

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

cssalignment

Issues with the functionality of jQuery append and AngularJS ng-if not functioning

In my application using checkboxes, I control the visibility of charts with the ng-if directive and implement drag-and-drop functionality with angular-Dragula. The use of ng-if is essential for me as it allows me to manipulate visible div IDs and organize ...

javascriptjqueryhtmlangularjs

Automatically advance to the next input field and go back when the backspace key is pressed after reaching the maximum length

Creating a credit card input field that switches cursor after reaching maximum number length and focuses on previous field when deleting with backspace. (function ($) { $(".nmipay-input-field").keyup(function () { if (this.value.l ...

htmljquery

"Encountering a 405 error when transmitting information from an HTML file to a Python Flask server using 'GET / HTTP/1.1'

As someone who is brand new to the world of python and AJAX, I have been piecing everything together from various sources online including examples and Flask documentation. So far, I have managed to make some progress. My goal is to send latitude and longi ...

javascriptpythonhtmlajaxflask

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

cssangulardatepickercalendarprimeng

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Using HTML, CSS, and JavaScript, the main tab must include nested subtabs to enhance navigation and

When a user clicks on a tab, another tab should open within the main tab. Depending on the selection in the second tab, input fields should appear while others hide. Something similar to the nested tabs on expedia.com. I have experimented with the tab vie ...

javascripthtmlcss

Choose checkboxes from an array of values using AngularJS

I have recently developed a page that includes text boxes, radio buttons, and checkboxes. This page serves as a platform for saving new data or modifying existing information. While I can successfully save new data, I encountered an issue when trying to ed ...

htmlangularjsarrays

Verify if a username is available using jQuery

When trying to register, I use this function to check the availability of a username. If the username already exists, the submit button is disabled. The check is done using a php script that queries the database for existing usernames. Everything works per ...

javascriptphpjqueryhtml