Hover effect using JQuery

Question

Hey friends i need to know how we can do the following?

like i am having the following links

client 1 client 2 client 3 client 4 client 5

while i place my mouse pointer over client 1 under the client 1,the following should be show as edit/Replace/Delete.same as client2,client 3,client 4.and client 5 how can we do this?
Update: While i go through a Client 1 i need the hover as follows

Client 1 Edit

         Replace

         Delete

Client 2

how can i do that?

Answer 1

jQuery comes with a mouse event for hover: http://api.jquery.com/hover/. Just show the divs once the hover function is called.

Answer 2

I created this demo

---

The Code Used:

$(function(){
  $('.dropdown').mouseenter(function(){
    $('.sublinks').stop(false, true).hide();

    var submenu = $(this).parent().next();

    submenu.css({
      position:'absolute',
      top: $(this).offset().top + $(this).height() + 'px',
      left: $(this).offset().left + 'px',
      zIndex:1000
    });

    submenu.stop().slideDown(300);

    submenu.mouseleave(function(){
      $(this).slideUp(300);
    });
  });
});

See the markup in example itself.

Note: If you are looking for panel menu, check it out on my blog:

• http://sarfraznawaz.wordpress.com/2010/03/13/creating-panel-menu-with-jquery/

Here is the demo of that:

• http://sarfraznawaz2005.kodingen.com/demos/jquery/menu_panel/

Screenshot: