Показать DIV рядом с Li элемент выпадающего меню

Question

Мне нужно разработать меню таким образом, чтобы подменю отображаться как показано на изображении ниже

Будем говорить, что меню 1, 2, 3 должны показать соответствующие div справа и меню 4.5 должны отображать контейнер div в левой части меню, как показано на рисунке ниже.

До сих пор мне удалось усовершенствовать работу, но это не идеально.

проблемы с этим

1. Я могу показать соответствующий DIV рядом с суб меню х, но показать его рядом с подменю в то время как я хочу его показать шоу вверх от верхней части 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