How to change tabs to menus without effecting page and its content

Question

I have a jquery ui "tabs" widget in one of my page that works perfectly.The tabs show horizontally like "Details" "Address" and on click of each tab, the different content is being shown like here

Jquery Tabs

But now I am working to change these tabs into menus. Actually there would only be one option the main menu for eg: "Employee" and when user will hover Employee, some new sub menus will open vertically like "Details", "Address" and so on, same like here which is fine and approachable:

Jquery Menus

with this, I have to show different content on different "sub menu" click as the tabs were showing different content on each different click. for eg: if a "Details" sub menu is clicked, the div content related to details should show and same for other sub menus. I have been trying it but not able to add content in sub menu. How can this be achieved?

I have used the same below code given by RRR but no success:

<div class="navbar">
        <ul id="menu">
            <li class="add">
               Employee
                <ul>
                    <li class="Emp_Details">Details</li>
                    <li class="Emp_Contacts">Contacts</li>
                    <li class="Emp_otherDetails">Other Details</li>

                </ul>
            </li>
        </ul>
    </div> 


<div class="content">


   <div class="Emp_Details">
            <div>
                <div>
                    <div class="adminWrapper">
                        <div class="common_outer">

                            <div class="margin-btm30">
                                <div class="shead clearfix">
                                    <h2 class="fLeft margin-top5">Details</h2>

</div>

</div>

</div>

</div>

</div>

</div>





  <div class="Emp_Contacts">
            <div>
                @{this.Html.RenderAction("Emp", "Address");}
            </div>
        </div>


<div class="Emp_otherDetails">
            <div>
                @{this.Html.RenderAction("Emp", "Emp_otherDetails");}
            </div>
        </div>




</div>


<style type="text/css">
    .ui-menu {
        width: 150px;
    }

    .navbar {
        width: 320px;
        float: left;
        height: 100%;
    }

    .content {
        width: 800px;
        float: left;
        height: 600px;
        border: 1px solid blue;
        padding: 10px;
    }

        .content div {
            height: 100%;
        }

            /*.content div:nth-child(even) {
            }

            .content div:nth-child(odd) {
            }*/
</style>




    $(function () {

        $("#menu").menu();

        $('.content div').hide();
        $('.content div').eq(0).show();

        $(document).on('click', '#menu li', function (e) {
            e.stopPropagation();
            if ($(this).children().length) {
                return false;
                console.log($(this).children().length);
            }
            var x = $(this).attr('class');
            x = x.substr(0, x.indexOf(' '));
            console.log(x);
            $('.content div').hide();
            $('.content div.' + x).show();
        });

    });