I am trying to code simple jquery drop down nav using \[code\]slideDown\[/code\] and \[code\]slideUp\[/code\] function, but it doesn't seem to be working properly, please find css and js code as following...\[code\].programsnav ul li{ float:left; margin-left:120px; display:block; position:relative; cursor
ointer; padding-bottom:5px;}.programsnav ul li:hover{ border-bottom:dashed 1px #fcfe93;}.programsnav ul li span{ display:none; position:absolute; width:930px; top:42px; left:-371px; background:#fcfe93; color:#161527; padding:10px 15px 15px 15px;}.programsnav ul li span a{ display:inline-block; padding:0 10px; border-right:dotted 1px #161527; color:inherit; font-size:12px; text-transform:uppercase;}\[/code\]js\[code\]$(document).ready(function(){ $('#downloadnav li').hover(function() { $('span', this).slideDown(100); }, function () { $('span', this).slideUp(100); });});\[/code\]html\[code\]<ul id="downloadnav"><li>Movies<span><a href="http://stackoverflow.com/questions/10687386/#">Movie1</a><a href="http://stackoverflow.com/questions/10687386/#">Movie2</a></span></li><li>Songs<span><a href="http://stackoverflow.com/questions/10687386/#">Song1</a><a href="http://stackoverflow.com/questions/10687386/#">Song2</a></span></li><li>Games<span><a href="http://stackoverflow.com/questions/10687386/#">Game1</a><a href="http://stackoverflow.com/questions/10687386/#">Game2</a></span></li></ul>\[/code\]Its keeps animating if i do mouseover on span>a, please help, thanks.
ointer; padding-bottom:5px;}.programsnav ul li:hover{ border-bottom:dashed 1px #fcfe93;}.programsnav ul li span{ display:none; position:absolute; width:930px; top:42px; left:-371px; background:#fcfe93; color:#161527; padding:10px 15px 15px 15px;}.programsnav ul li span a{ display:inline-block; padding:0 10px; border-right:dotted 1px #161527; color:inherit; font-size:12px; text-transform:uppercase;}\[/code\]js\[code\]$(document).ready(function(){ $('#downloadnav li').hover(function() { $('span', this).slideDown(100); }, function () { $('span', this).slideUp(100); });});\[/code\]html\[code\]<ul id="downloadnav"><li>Movies<span><a href="http://stackoverflow.com/questions/10687386/#">Movie1</a><a href="http://stackoverflow.com/questions/10687386/#">Movie2</a></span></li><li>Songs<span><a href="http://stackoverflow.com/questions/10687386/#">Song1</a><a href="http://stackoverflow.com/questions/10687386/#">Song2</a></span></li><li>Games<span><a href="http://stackoverflow.com/questions/10687386/#">Game1</a><a href="http://stackoverflow.com/questions/10687386/#">Game2</a></span></li></ul>\[/code\]Its keeps animating if i do mouseover on span>a, please help, thanks.