Fade in submenu items one by one

[bilibala]

Hello everyone,

I am thinking to create a vertical menu, which may contain sigle level or even multiple levels of submenus.
While mouse is hover one main menu item (parent menu), the related submenu items will appear one by one on the right hand side.
While click on one of the submenu item, the related page is loaded, and the menu and submenu will be remained and highlighted.
For example:
The Main menu contains 4 items, A, B, C and D
When mouse is hover Item C, the related submenu items, C.1, C.2 and C.3 will appear on the right
When click on one of the sunmenu items, such as Item C.3, the related page is loaded, and the menu and submenu will be remained and highlighted (with '<' shown below).

Item A
Item B
Item C< - Item C.1
Item D    Item C.2
          Item C.3<

Thank you so much!

[CoursesWeb]

Hi,
Try look on the net for "jQuery accordion menu", there are lots of examples. Maybe you'll find one like you want.

[elbeato]

You could have the sub-menu in a hidden div, so that when you hover or click on the relevant main-menu item, you can ise jQuery's native fadeIn() to make the submenu appear. After you've defined the submenu location in your CSS, the jQuery would be something like this:

$("#menuitem").hover( function(){
    $("#submenu").fadeIn();
})