Why is the fade-in not working with this CSS?

Question

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 want the first level to fade in, on hover on a list item of the main menu, but it just doesn't seem to work. I have spent hours on it and I'm not sure what's really wrong. Any pointers?

If you need to see the complete code: http://paperbird.in/projects/BusinessConclave/index.php

Answer 1

Edit: Ok, you contributed your website, so here's the solution, actually the transition does work, but z-index is causing you an issue there, so it flicks the sub menu instantly.. though it transits, use z-index: 100; for .nav ul li:hover > ul on line 153 in style.css and make sure you remove visibility properties as they are not required.

---

First of all, your markup is invalid, you cannot nest ul as a direct descendant to ul so nest that in an li and secondly, you cannot transit visibility property, so only use opacity and get rid of the visibility property as well. If you want, you can also use animation-timing-function property with a value of linear for a consistent fadein and fadeout effect.

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;
}

And make sure you declare properietary properties before general properties.