JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<html !doctype>
<head>
<title>JqueryMenu</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript">


  </script>
</head>
<body>

<div id="wrapper">
	<div id="header">
		<div class="title">
			<h2>ProductName</h2>
		</div>	
		<div class="logout">
			Welcome: Username - (22 Feb 2013)
			<p>Logout</p>
		</div>
	</div>
	<div id="menu">
	<ul id="nav"></ul>
		
	</div>
	<div id="container">
	
	</div>
	<div id="footer">
	</div>
</div>
</body>
</html>

CSS

#wrapper
 {
	width:100%;
	height:500px;
 }
 h2{
	color:#787878;
 } 

#nav,
#nav ul {
    list-style: none;
	padding: 2px;
	
}
#menu{
	border-bottom: 1px solid #CCCCCC;
    border-spacing: 0;
    display: table;
    float: left;
    height: 25px;
    width: 100%;
}
#menu ul {
    margin: 0;
    padding: 0;	
    }

	#menu ul li a:hover{
		background: none repeat scroll 0 0 #FFFFFF;
    border-color: #ccc #ccc #FFFFFF;
    border-style: solid;
    border-width: 1px;
    padding-bottom: 0;
		}
	
		.nav-child {
		width:160px;
		display:block !important;
		}
		#menu ul li ul {
		border-radius:0px;
		border-color:#fff #ccc #ccc #ccc !important;
		}
		#menu ul li ul li:hover{
		border:0px;
		}
#nav {
    float: left;
	height: 25px;
	 
}
#nav> li {
    float: left;
}

#nav li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;

}

#nav ul {
    position: absolute;
    display: none;
z-index: 999;
}

#nav ul li a {
    /*width: 80px;*/
	
}
#nav li:hover ul {
    display: block;
}
#nav {
    font-family: Arial;
    font-size: 12px;
	
    //background: #F8F8F8 ;
}
#nav > li > a {
font-family: Verdana,Arial,sans-serif;
font-style: normal;
    color:#787878 ;
    font-weight: bold;
}
#nav > li > a:hover { 
    /*color: #000;*/
}
#nav ul {
    background: #fff;
	border:1px solid #C0C0C0;
border-radius:5px;
}
#nav ul li a {
    color: #000;
}
#nav ul li a:hover {
    background: #E0E0E0 ;
}
.logout
{
float:right;
width:300px;	
}
.title{
float:left;
width:300px;
}

#footer
{
width:100%;
height:100px;
float:left;
}
.subchild-list
{
	
	margin: 0 116px !important;
    position: absolute !important;
}

.child-list ul
{
	display: none !important;
    position: absolute !important;
    z-index: 999 !important;
}
.child-list  li:hover ul {
    display: block !important;
}

JavaScript

var data = [
{
    "parent": "Home",
    "child": [
            ]
},

{
    "parent": "New Transaction",
    "child": [
            ]
},
{
    "parent": "Instructions",
    "child": [
       { "title":"Recruitment",
           "subchild": [
               {"title":"sub1"},
               {"title":"sub2"},
               {"title":"sub3"}
           ]},
		   {
		   "title":"Management",
		   "subchild": [
               {"title":"sub4"},
               {"title":"sub5"},
               {"title":"sub6"}
           ]
		   
		   },
		   {"title":"Relations"}
       
        
        ]
}
];
	$(function() {

    var nav = $("#nav");
    $.each(data,function(idx, obj){
        if(obj.child.length>0)
        {
            nav.append('<li class="list"><a href="#" class="parent-menu">'+obj.parent+'</a><ul class="child-list" id="'+obj.parent+'">'); //Create Parent menu and attach Child menu items list with ID same as parent menu name.
            var parent = $("#"+obj.parent); //Select this parent to insert child items.

            //Insert child menu items.
            $.each(obj.child, function(idx, childobj){
                var childid = obj.parent + '-item-' + idx;
                parent.append('<li class="nav-child" id="'+childid+'"><a href="#">'+childobj.title+'</a></li>');

                //insert subchild items
                if(childobj.subchild != undefined && childobj.subchild.length>0){
                    var child = $("#"+childid); //Select child element to insert subchild items.
                    child.append('<ul class="subchild-list"></ul>');
                    var ul = $(child).find('ul');

                    $.each(childobj.subchild, function(index, subchildobj){
                        ul.append('<li class="nav-subchild"><a href="#">'+subchildobj.title+'</a></li>');                
                    });   
                }
            });
            nav.append('</ul></li>'); //Close each tag.
        }
        else
        {
           ...