Как изменить вкладки на меню, не влияя на страницу и ее содержимое

Question

У меня есть виджет jquery ui "вкладки" на одной из моих страниц, который отлично работает. Вкладки показывают горизонтально как "Детали" "Адрес", и при нажатии на каждую вкладку различное содержимое показывается, как здесь

Jquery Tabs

Но сейчас я работаю над превращением этих вкладок в меню. На самом деле в главном меню может быть только одна опция, например: "Сотрудник", и когда пользователь наведет курсор на Сотрудника, некоторые новые подменю будут открываться вертикально, например "Детали", "Адрес" и т. Д., Так же, как здесь, что хорошо и доступно.:

Jquery Menus

при этом я должен показывать разный контент по разным щелчкам "подменю", так как на вкладках показывалось разное содержание при каждом отдельном клике. Например, если щелкнуть подменю "Детали", должно отобразиться содержимое div, относящееся к деталям, и то же самое для других подменю. Я пытался, но не смог добавить контент в подменю. Как этого достичь?

Я использовал тот же код ниже, данный RRR, но безуспешно:

<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();
        });

    });