Show div next to li element of a dropdown menu

Question

I need to design menus in such a way so that submenus show up as show in image below

Let us say that menu 1, 2, 3 should show corresponding div on right and menu 4,5 should show div container on left side of the menu as show in image below.

So far i have been able to manage to make it work to some extend but it is not perfect.

issues with this

1. I am able to show corresponding div next to sub menu x but it show it next to submenu while i want it show show up from the TOP of the menu sub menu contianer.

2. I want it to show first submenu as default select when one hover over parent menu, at present it doen't show submenu related text and image unless i hover over submenu.

Fiddle Example

Below is the code.

<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

I would appreciate help in this regarding i dont mind using jquery with it so to make it work properly and show.

Answer 1

Like this links helping you

demo