What could be causing the CSS fade-in effect to not be functioning properly?

HTML:

<ul class="nav">
<ul>
  <li><a href="index.php">Home</a></li>
  <li><a href="#">A</a>
    <ul>
      <li><a href="x.php">X</a></li>
      <li><a href="y.php">Y</a></li>
      <li><a href="z.php">Z</a>
    </ul>
  </li>
</ul>
</ul>

CSS:

.nav ul ul {
    position:absolute;
    visibility: hidden;
    opacity:0;
    width:170px;
    margin:0;
    transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -webkit-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -moz-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}

.nav ul li:hover > ul {
    visibility: visible;
    opacity:1;
}

I'm facing an issue where the first level doesn't seem to fade in on hover of a list item from the main menu. I've tried multiple approaches and spent hours trying to fix it, but with no luck so far. If you have any suggestions or pointers on what might be wrong, please let me know.

If you want to view the entire code for reference, click here:

htmlcsstransition

Answer №1

Update: Great job sharing your website! I have identified a solution for you. While the transition is functioning correctly, the issue lies with the z-index, causing a flickering effect on the submenu. To address this, simply add z-index: 100; to the .nav ul li:hover > ul selector in line 153 of your style.css file. Additionally, remove the unnecessary visibility properties.

It's important to note that nesting a ul directly inside another ul is invalid markup. Instead, nest it within an li element. Furthermore, you cannot transition the visibility property, so replace it with opacity. For a smoother fade-in and fade-out effect, consider adding the 

animation-timing-function: linear;
property.

See Demo

.nav ul ul{
     position:absolute;  
     opacity:0; 
     width:170px;  
     margin:0;
     -webkit-transition:opacity 0.3s linear; 
     -moz-transition:opacity 0.3s linear; 
     transition:opacity 0.3s linear; 
}

.nav ul li:hover > ul{ 
    opacity:1;
}

Lastly, remember to declare proprietary properties before general ones.

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

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

How to utilize the CSS hover feature within an Angular directive?

Presented here is the default directive. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export class BoxDirective { @Input() backgroundColor = '#fff'; con ...

cssangularangular2-directivesangular-directive

Which IDE is the top choice for HTML5 when programming with .NET on the server side?

Is Visual Studio 2010's support for JavaScript and jQuery enough to make it a top choice for working with JS/HTML5? Or are there other IDEs out there that offer better options? I typically use .Net for the server side of my projects, so Visual Studio ...

javascriptvisual-studio-2010htmlide

Why does the Select2 Drop down eliminate the mandatory border color?

Within my application, I have implemented a feature where required fields are designated with a red border. To achieve this effect, I utilized the following CSS code: input[data-val-required], select[data-val-required] { border: 1px solid #EFA4A4 !imp ...

jquerycssasp.net-mvcjquery-select2

Implementing automatic dark mode activation during nighttime with jQuery or JavaScript

I'm looking to implement an automatic dark mode feature on my website that switches on at night and off during the day or morning. Currently, my website has a dark mode toggle code that allows users to switch between dark and light modes using local ...

javascripthtmljquerylocal-storagedarkmode

Iterating through form elements for validation using jQuery

Is there any way to accomplish this using jQuery? This is the initial setup: <input type='checkbox' class='sk1' /> <input type='text' class='skill1' /> <input type='checkbox' class=' ...

javascriptjqueryhtmlinput

What is the best way to eliminate the space between <div> elements?

I am looking to arrange <div> elements in a specific layout where one is at the top, three are in the middle in a row, and one is at the bottom without any extra space. It is necessary that there remains a space between the middle <div>s and th ...

htmlcss

Modify the background's color and incorporate a pointlight using three.js

Recently, I have been exploring the capabilities of three.js. One interesting challenge I encountered was creating a cube within a wireframe cube. However, I found myself struggling to alter the background color in my project. I believe that incorporating ...

javascripthtmlcanvasthree.js

"Get a glimpse of the brackets image with real-time live

I seem to be encountering a strange issue. I have double-checked the source code for my image, and when I view the page in Chrome without using Brackets, the image displays properly. However, when I use Brackets Live preview, the image does not show up i ...

htmlcssadobe-brackets

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

This layout is what I am aiming for: https://i.sstatic.net/uZdty.png While I can achieve a fixed aspect ratio with a 16:9 image by setting the img width to 100%, I run into an issue where the height scaling of flexbox becomes non-responsive. The height re ...

javascripthtmlcssflexbox

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

javascripthtml

Notification box appearing on the homepage

I created a landing page featuring various products. Each product is accompanied by a description and price. When you click on a product, a "popup window" should appear displaying the picture and description. My concern is that if I have numerous product ...

javascriptjqueryhtmlcsspopup

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...

htmlcssangular

When attempting to upload a file from IOS10.3.1, the server received the correct file size but retrieved incorrect data, all of which appeared as

I'm facing issues with correctly uploading files. Our iOS and Android app allow users to select a local image file and upload it to our Nginx server. Issue Summary: Approximately 5% of the total upload requests result in broken image files on the se ...

c#htmliosasp.netnginx

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

What is the method for passing an element in Angular2 Typescript binding?

Is there a way to retrieve the specific HTML dom element passed through a binding in Angular? I'm having trouble figuring it out, so here is the relevant code snippet: donut-chart.html <div class="donut-chart" (donut)="$element"> ...

htmlangulartypescript

Using Ajax to submit two forms by clicking a submit button

Explanation : In this particular scenario, I am facing a challenge where I need to trigger another Ajax function upon successful data retrieval, but unfortunately, I am encountering some unknown obstacles. Code: ---HTML Form : <form accept-charset=" ...

javascriptphpjqueryhtmlajax

Every time I insert the SVG logo onto the bootstrap navbar, the formatting mysteriously alters

I'm facing an issue with my svg logo on the navbar - half of it is formatted correctly while the other half is not. Additionally, there is a discrepancy in how it appears on Safari and Chrome. I exported this svg file from Adobe Illustrator and incorp ...

htmlcsssvgbootstrap-4

Using Javascript to apply unique styling to CKEditor text

Currently, I am working on a self-contained web page and utilizing CKEditor 4.6.2 for input purposes. The issue I am facing at the moment is attempting to apply a CSS class style to text that has been inserted via JavaScript. My CSS is located in the head ...

javascripthtmlcssckeditor

Ways to optimize view caching to prevent unnecessary file reads and rendering

My current code includes multiple view render calls: router.get('/mcn', (req, res) => { res.render('product/mcn', { layout: 'product/layout', contactKey: 'mcn' }); }); router.get('/agency', (req, res ...

htmlnode.jsexpresspugserver-rendering