html - My jQuery fade in effect doesn't work -

this fade in / fade out effect jquery isn't working. dont error. menu rendered , working there no delay or fade menu on hover. here working fiddle. using jquery 1.9.1. dont want post css huge , take place. issue presume jquery , not css.

html

<ul id="nav">     <li><a href="#">1 html</a>     </li>     <li><a href="#">2 css</a>     </li>     <li><a href="#">3 javascript </a>          <ul>             <li><a href="#">3.1 jquery</a>                  <ul>                     <li><a href="#">3.1.1 download</a>                     </li>                     <li><a href="#">3.1.2 tutorial</a>                     </li>                 </ul>             </li>             <li><a href="#">3.2 mootools</a>             </li>             <li><a href="#">3.3 prototype</a>             </li>         </ul>     </li> </ul> 

jquery

$(document).ready(function () {     $(" #nav li").hover(      function () {         $(this).find('ul:first').stop(true, true).delay(1000).fadein("slow")     }, function () {         $(this).find('ul:first').stop(true, true).delay(1000).fadeout("slow");     }      )  }); 

css

this css part messing js:

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {     display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {     display:block; } 

remove (or modify it) , delay.