How to build a JQuery menu using a list element?

[colinod]

I am trying to build a JQuery menu using a list element.

I can get the elements to appear when my mouse hovers over the top button but they dissapear before i can get to the sub menu buttons

JQuery is as follows

      $(document).ready(function(){
 
        // Hide all unordered lists that are descended from the navigation
                $("#artistnav ul").hide();
    });
 
    $(window).load(function(){
        $('#artistnav a').bind('mouseover', function(){
 
      // on clicking the link get the parent li then find the first ul you can and display
 
      $(this).parents("li:first").find("ul:first").toggle();
      //return false;
 
});
    });

the html code is as follows

<div id="artistcats">
<ul id="artistnav">
<li><a href="boys2.asp?id=368&voicetype=All"><img src="http://bytes.com/submit/images/voicetypes/tabs/mainpage_up.png" alt="Main Page" class="thumb" id="mainpage" onMouseOver="MM_swapImage('mainpage','','../images/voicetypes/tabs/mainpage_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
</li>
 
<li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Ages_up.png" alt="Ages" class="thumb" id="Ages" onMouseOver="MM_swapImage('Ages','','../images/voicetypes/tabs/Ages_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  <UL>
 
 <li><a href="boys2.asp?id=368&voicetype=40s">40's</a></li>
 
 
          </UL>
          </li>
 
<li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/UK Accents_up.png" alt="UK Accents" class="thumb" id="UK Accents" onMouseOver="MM_swapImage('UK Accents','','../images/voicetypes/tabs/UK Accents_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  <UL>
 
 <li><a href="boys2.asp?id=368&voicetype=Neutral">Neutral</a></li>
 
 
          </UL>
          </li>
 
<li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Styles_up.png" alt="Styles" class="thumb" id="Styles" onMouseOver="MM_swapImage('Styles','','../images/voicetypes/tabs/Styles_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  <UL>
 
 <li><a href="boys2.asp?id=368&voicetype=Authoritative">Authoritative</a></li>
 
 
 <li><a href="boys2.asp?id=368&voicetype=Documentary/Corporate">Documentary/Corporate</a></li>
 
 
 <li><a href="boys2.asp?id=368&voicetype=Presenter/DJ">Presenter/DJ</a></li>
 
 
          </UL>
          </li>
 
</ul>
</div>

I also am trying to set a width of the menu items to be wider than the buttons at the top of the memu i have set it wider in CSS but it moves all the buttons across

The page can be seen here

http://www.yaketyyak.co.uk/newpages/...&voicetype=All

many thanks

colin

[gits]

i followed the link and it works - tried it with chromium 24 - is there still an issue with that?

[colinod]

Hi yes i have sorted that used a different jquery code i found!!!

thanks