show a div depending on the selection

I have the following http://jsbin.com/useqa4/10

My question is this: In the submenu I hover some li elements using the following

$(".submenuList li").hover(function () {
  $(".submenuCurrent").removeClass("submenuCurrent");
  $(this).addClass("submenuCurrent");
  });

When I rollover on any of these the right section I want to change and show a specific div.

For example:

• for开发者_如何学编程 the first li the div #prasentRight

• for the second li the div #elitRight

• for the third li the div #suspendisseRight

• for the forth li the div #laoreetRight

My difficult is that I don't know how to get the current index of .submenuList li

Any help?

I think that this should work:

$('submenuList li').hover(
  function(){
    var thisIndex = $(this).index();
    $(this).attr('title',thisIndex);
  });

Shows the current index of the hovered-over list items in the title attribute of the element, demo at JS Bin.