What could be causing my hover effect to function exclusively on Chromium-based browsers and not on Firefox?

Could use some help with this code snippet

.podmenu {
    display: flex;
    flex-direction: column;
    list-style: none;
    width: 10rem;
    margin-left: 3rem;
    margin-bottom: 60px;

}

.verze {
    list-style: none;
    flex-direction: column;
    display: none;
    margin-top: 1rem;
    transition: 2s;
    margin-left: -2.94rem;
}

.podmenu:hover {
    .verze {
        display: flex;
    }
}
<ul class="podmenu">
  <li class="n">Verze</li>
  <li>
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
  </ul>
</li>
</ul>

This code is designed to show variables when hovering over text in the li element with the class n. It works fine on chromium-based browsers but not on Firefox. I'm unsure of what steps to take next, especially since it only seems to be an issue in Firefox.

htmlcss

Answer №1

There is an issue with your code as it contains invalid syntax. You should not nest CSS selectors in this manner:

.podmenu:hover {
    .verze {
        display: flex;
    }
}

The correct way to write it is like this:

.podmenu:hover .verze {
    display: flex;
}

Test the modified example below now:

.podmenu {
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 10rem;
  margin-left: 3rem;
  margin-bottom: 60px;
}

.verze {
  list-style: none;
  flex-direction: column;
  display: none;
  margin-top: 1rem;
  transition: 2s;
  margin-left: -2.94rem;
}

.podmenu:hover .verze {
  display: flex;
}
<ul class="podmenu">
  <li class="n">Verze</li>
  <li>
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
    </ul>
  </li>
</ul>

Answer №2

.podmenu:hover {
    .verze {
        display: flex;
    }
}

One issue you may encounter is that nesting CSS selectors, a feature commonly used in preprocessors like Sass/SCSS, has historically been invalid syntax in most browsers for the past couple of decades. This would typically result in the CSS parser stopping and disregarding the rest of the style rule when encountering nested selectors.

However, a new specification has introduced native support for nesting selectors in CSS. Chromium was the first to implement this feature in version 112, followed by Safari in version 16.5. Firefox is currently in the process of adding support for CSS nesting, as mentioned in this bug report.

Note: Although native CSS nesting differs slightly from Sass/SCSS nesting, with some syntactic and semantic variations, you can refer to the specification for more details on these discrepancies.

To ensure your CSS code works across all browsers, including Firefox, you should flatten the nesting structure like this:

.podmenu:hover .verze {
    display: flex;
}

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

Issue regarding the functionality of CSS styling when applied to a button

Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...

htmlcss

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

htmlcsstwitter-bootstrap

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

cssflexbox

What is the best way to connect an image to a different webpage?

I have a question regarding a div that contains an image acting as a link to another page. The image has text overlaying it and can be found at this link: This code was sourced from the internet, but I made some modifications to it. My goal is simply to ...

htmlcss

What is the default DTD used if it is not specified in the doctype declaration?

On my webpage, the doctype is specified as: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> No DTD is explicitly set. I'm curious which DTD will be defaulted in IE? It seems that it doesn't function the same way as "http ...

html

Unable to see the changes made to the Understrap child-theme and the color variable in Sass is not

I am trying to adjust the main theme color assigned by $primary in _theme_variables.scss. I changed the default value from $purple to $orange while using npm run watch-bs (browser-sync). However, the change is not reflecting on the home page: https://i.ss ...

csssasswordpress-themingbootstrap-5

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms

React automatic scrolling

I am currently working on implementing lazy loading for the product list. I have created a simulated asynchronous request to the server. Users should be able to update the page by scrolling even when all items have been displayed. The issue arises when ...

javascripthtmlreactjs

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...

htmlcss

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Can anyone help me retrieve the tooltip text that appears when I hover over the time indicating how long ago a game was played? You can find my summoner profile here. I have noticed that the tooltip text is not visible in the HTML code and suspect it may ...

javascriptpythonhtmlselenium

The Fade In effect in jQuery causes my fixed header to overlap with images on the page

This is the javascript snippet using jquery <script type="text/javascript> $(document).ready(function () { $('#showhidetarget').hide(); $('a#showhidetrigger').click(function () { $('#showhidetarget&apo ...

jquerycssfixedstickyoverlapping

Is the hidden element still viewable even with display: none?

Can you explain why the icon is still visible when the display is set to none? .toc.item { display: none; } <a class="toc item"><i class="sidebar icon"></i></a> ...

htmlcss

How come the nth-child selector remains unaffected by other selectors?

Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/ <style> table td, th { padding: 8px; text-align: left; } table td:nth-child(1) { color: red; } table td { color: blue } </style> ... <table> <tr> ...

htmlcss

Tips for aligning a row with both text and input fields in the center

I'm working on a design that includes text and input fields in rows, and I want everything to be centered. Should I wrap all the content in a div and center it as a whole, or should I center each row individually? Any suggestions? Here is the code sn ...

htmlcss

Sitelinks and a brief description appear beneath the website name when it is displayed in search

Is there a way to incorporate "metadata" (green and red lines in the image below) into a website? I might not have the correct term for it, so my apologies in advance. I attempted changing the following tag in the index.html file, but I am uncertain if thi ...

htmlmeta-tags

The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...

htmlcss

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

Automatically reloading POST request when browser back button is pressed

Our web application is built on Spring MVC and Thymeleaf. When a user lands on the home page with a GET request, they enter 2 parameters and submit a POST request. After successful submission, they are directed to another page (let's call it page2) wi ...

javascripthtmlbrowser

Make the table in a bootstrap design appear with a border when you hover over a cell using the table

Looking for a solution to make the border work as expected when hovering over each td in a table like this example: https://jsfiddle.net/nmw82od1/ Here is the CSS code: .table1 td:hover { border: 1px solid black; } .table2 td:hover { border: 1px do ...

javascriptcsshtml-tablebootstrap-4

What is the best way to align the bottom of the last child of a flex element?

Current: Desired: Is it possible to achieve this using the flex or grid model, or do I need to reconsider the structure with a different approach? Below is the code snippet: .sections { display: flex; flex-direction: row; flex-wrap: wrap; jus ...

htmlcssflexbox