I can't get the rest of the submenu to show properly

Question

I have this menu with a ul submenu and the script i wrote i can only show the first submenu and the other one doesn't show.

this is the jquery script i'm using

$(document).ready(function(){
     $('#top_menu_blockx').hover(
        function(){
            $('#top_menu_blockx').children('ul').stop().fadeIn('slow');
        },
        function(){
            $('#top_menu_blockx').children('ul').stop().fadeOut('slow');
        }
     );
});

I've included a link tot he jsfiddle. http://jsfiddle.net/kakashi807/RrYs4/2/

btw, why the color of the font of the submenu doesn't change to white when the mouse is hovering?

thank you

Answer 1

Try this - DEMO

$(document).ready(function(){
     $('.top_menu_btnx').hover(
        function(){
            $(this).children('ul').stop().fadeIn('slow');
        },
        function(){
            $(this).children('ul').stop().fadeOut('slow');
        }
     );
});

And about your HTML - ID-s SHOULD BE UNIQUE!