css - Can't fade out submenu, with jQuery -


this first question! certanly me on this.

i´m working on horizontal menu:

html:

<div id="menu">   <ul>     <li><a href="#">menu 1</a>       <ul>         <li><a href="#">submenu 1.1</a>           <ul>             <li><a href="#">submenu 1.1.1</a></li>           </ul></li>         <li><a href="#">submenu 1.2</a></li>         <li><a href="#">submenu 1.3</a></li>       </ul></li>     <li><a href="#">menu 2</a>       <ul>         <li><a href="#">submenu 2.1</a>           <ul>             <li><a href="#">submenu 2.1.1</a></li>           </ul></li>       </ul></li>               <li><a href="#">menu 3</a></li>            </ul> </div> 

css:

  body    {      font-family: "calibri";     margin:0;     padding: 0;   }    #menu   {     width: 100%;     min-width: 400px;     height: 30px;     background-color: #222;   }    #menu ul    {      line-height: 30px;    }    #menu ul li    {     list-style: none;      float: left;      position: relative;    }    #menu ul li    {      padding-left: 5px;      text-decoration: none;      width: 100px;      height: 30px;      color: white;      background-color: black;      display: block;   }    #menu ul a:hover    {      background-color: grey;    }     #menu li ul    {      display: none;     position: absolute;     left: 0px;     top: 100%;     padding-top: 3px;     padding-left: 3px;     line-height: 20px;   }    #menu li ul li    {     height: 20px;     font-size: small;    }    #menu li:hover > ul    {      display: block;   }    #menu li ul li    {     width: 150px;   }    #menu li ul li    {      padding-top: 1px;   }    #menu li ul li ul    {     left: 100%;      top: 0;   }    #menu li:hover >    {     background-color: grey;   } 

jquery:

$(function() {    $('li > ul').animate({'opacity': 0});    $('li').hover(function () {     $(this).find('ul:first').stop().animate({'opacity': 1});   },function() {     $(this).find('ul:first').stop().animate({'opacity': 0});   });  }); 

as can see, fade in effect (with opacity) working when option hovered, how can make fade out? i'm working ie9.

thanks!

first off, made jsfiddle provided code. can see, works fine, , because jsfiddle set run javascript onload.

so need make sure function run after dom loaded, wrapping in code block following:

$(document).ready(function() {   // js function here  }); 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -