旁边的下拉菜单的li元素显示格

Question

我需要设计菜单，以这样的方式，这样子菜单下面

图像显示为节目让我们说，菜单1，2，3应该表现出相应的右边的div和菜单4,5应该在菜单左边显示div容器，如下图所示。

到目前为止，我已经能够设法使其工作到一定程度，但它并不完美。

这个

1. 问题，我能够显示对应的下一个子菜单X格但它旁边的子菜单中显示它，而我希望它显示在菜单的子菜单contianer的状元秀了。

2. 我希望它将第一个子菜单显示为默认选择，当鼠标悬停在父菜单上时，目前它不会显示与子菜单相关的文本和图像，除非我将鼠标悬停在子菜单上。

Fiddle Example

下面是代码。

<nav> 
    <ul> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu2</a> 
      <ul> 
       <li><a href="#">Menu 1</a> 
        <ul class="block"> 
         <li><div class="div">This block show some text and an image on the right side of the text </div></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu 2</a> 
        <ul class="block"> 
         <li><div class="div">This block show some text and an image on the right side of the text </div></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu 3</a> 
        <ul class="block-right"> 
         <li><div class="div-right">This block show some text and an image on the right side of the text </div></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Menu3</a> 
      <ul> 
       <li><a href="#">Menu 2</a></li> 
       <li><a href="#">Menu 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu4</a></li> 
     <li><a href="#">Menu 5</a> 
      <ul> 
       <li><a href="#">Menu 1</a> 
        <ul class="block"> 
         <li><div class="div">This block show some text and an image on the right side of the text </div></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu 2</a> 
        <ul class="block"> 
         <li><div class="div">This block show some text and an image on the right side of the text </div></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu 3</a> 
        <ul class="block"> 
         <li><div class="div">This block show some text and an image on the right side of the text </div></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Fiddle Example

我希望关于我使用jquery用这么使其正常显示和工作不介意在这个帮助。

Answer 1

像这样links helping you

demo