JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<div class="ui-layout-north">&nbsp;</div>
<div class="ui-layout-west" id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a>

            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>

                </li>
                <li><a href="#">Sub Menu Item 2</a>

                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a>
                        </li>
                        <li><a href="#">Sub Sub Menu Item 2</a>
                        </li>
                        <li><a href="#">Sub Sub Menu Item 3</a>
                        </li>
                        <li><a href="#">Sub Sub Menu Item 4</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 3</a>
                </li>
                <li><a href="#">Sub Menu Item 3</a>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li> <a href="#">FAQ</a>

            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>
                </li>
                <li><a href="#">Sub Menu Item 3</a>

                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a>
                        </li>
                        <li><a href="#">Sub Sub Menu Item 2</a>
                        </li>
                        <li><a href="#">Sub Sub Menu Item 3</a>
                        </li>
                        <li><a href="#">Sub Sub Menu Item 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li> <a href="#">News</a>

            <ul...

CSS

/*layout*/
 div {
    display: block;
}
.ui-layout-north {
    height:50px;
    background-color:red;
}
.ui-layout-west {
    width:100px;
    height: 600px;
    background-color:yellowgreen;
    float: left;
    color:orange;
}
.ui-layout-center {
    width:100%;
    height: 600px;
    background-color:lightblue;
}
/*end layout*/

/*menu*/
 #navigation {
    font-size:0.75em;
    width:150px;
}
#navigation ul {
    margin:0px;
    padding:0px;
}
#navigation li {
    list-style: none;
    overflow:visible;
    z-index:1000;
}
ul.top-level {
    background:#666;
}
ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
}
#navigation a {
    color: #fff;
    cursor: pointer;
    display:block;
    height:25px;
    line-height: 25px;
    text-indent: 10px;
    text-decoration:none;
    width:100%;
}
#navigation a:hover {
    text-decoration:underline;
}
#navigation li:hover {
    background: #f90;
    position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}
#navigation .sub-level {
    background: #999;
}
/*Third Level*/
 #navigation .sub-level .sub-level {
    background: #09C;
}
li:hover .sub-level .sub-level {
    display:none;
}
.sub-level li:hover .sub-level {
    display:block;
}
#source {
    padding-top:30px;
}
/*end menu*/

JavaScript

$(document).ready(function () {
    var mylayout = $("body").layout();
});