Drop-down panel interface element - suggestions?

Hi all,

I'm a newbie at coding, so please be patient with me. I'm having a lot of trouble with a drop down panel user interface element.

This is my Test site so far:

www.ucs.co.uk/test

I hope this example makes it clear what I am trying to achieve. The blue bar will contain about 5 main categories, and when a main category is mouse-overed or pressed, the drop down panel will show the sub-categories.

Currently I am using jkpanel, but it seems optimised for only one panel per page. I will require about 5 different panels.

Does anyone know of any alternatives that I can use that will provide the same functionality but will easily allow for more than one panel per page. Or, a solution to have more than one panel per page. Many thanks,

 

Many thanks for the feedback angelwatt. An accordion menu isn't really what I'm going for here. This is what I want to achieve:

If you can imagine, that long blue bar will contain about 5 Main Categories (i.e. Products, Markets, Support, About, Search). When I mouseover/click on the Main Category 'Products', the drop down panel 'sub-menu' will be revealed, displaying a range of my products. When I mouseout of the drop down panel sub-menu, the panel will hide away underneath the blue bar.

I hope this makes sense - I apologise that I haven't gotten far enough to effectively illustrate this. I appreciate your help anyway. Many thanks and kind regards,