jquery - Struggling with slideToggle on nested lists -

first, honest i'm noob when comes jquery. i've been watching ton of tutorials , reading on jquery site itself. while beginning understand it, concept hasn't "clicked" me of yet.

i'm working on product display want box slide down when hovering on product image. box contains list of models.

i've got page set here:

http://www.tailwatersflyfishing.com/sage-fly-rods

this effect i'm trying duplicate (one of our rod vendors)

http://www.sageflyfish.com/rods-landing.html

i've attempted writing code, have failed @ getting work. have in page:

$('document').ready(function () {     $('.rod-tall').children('.rod-inner').children('.rod-list').hide();     $('.rod-list ul div li ul li a').click(function() {         window.location = $(this).attr('href');     });      $(".rod-tall .rod-inner").mouseenter(function () {     $(this).children('.rodlist').children('.desc-box').slidetoggle('fast');     });      $(".rod-tall .rod-inner").mouseleave(function () {     $(this).children('.rodlist').children('.desc-box').slidetoggle('fast');     }); }); 

----update----

i have included in page:

<script type="text/javascript">    $(document).ready(function() {    $('.rod-list').hide();    $('.rod-tall').hover(function() {    $('.rod-list',this).slidetoggle('fast');    },function() {    $('.rod-list',this).slidetoggle('fast');   });​ </script> 

all prototype errors gone. getting error (uncaught syntaxerror: unexpected token illegal) hope cause of script not working. there invalid character or invisible character causes error?

thanks!

how (jsfiddle example):

jquery:

$('.rod-list').hide(); $('.rod-tall').hover(function() {     $('.rod-list',this).slidetoggle('fast'); },function() {     $('.rod-list',this).slidetoggle('fast'); }); 

css:

.rod-list {     position:absolute; }