Question

I have main menu which contain 6 element or main categories – when we hover over these main menus then we can see their sub menus or categories.

http://newiagadvisors.advisorproducts.com/home

My Requirement is like this way:

it’s possible to have the sub-menus or categories appear as choices when someone clicks on the pictures as well – in the same way while hovering over main menu we see their sub categories or menus?

I want same menu hover functionality on click event when someone click on picture

Below is the jquery code for main menu dropdown on hover event:

$(function()
{
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

Answer 1

Try something like this:

var images = $('#banner img'),
    menuItems = $('.dropdown.sub-menu > li');

images.click(function(){
    var index = images.index(this);

    var li = menuItems.eq(index),
        sublist = li.find('ul:first');

    if(sublist.length)
    {
        li.addClass("hover");
        sublist.css('visibility', 'visible').show();
    }
});