CSS Codes
CSS Layouts
<!DOCTYPE HTML>
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="powerlistmenu.css" />

<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="powerlistmenu.js">

/***********************************************
* Mobile Power List Menu (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var powerinstance

jQuery(function($){ // on DOM load
powerinstance = new Powerlistmenu({
menuid: 'powermenu1' // id of main nav container
})
})

</script>

</head>

<body>

<nav id="powermenu1" class="powerlistmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="http://www.dynamicdrive.com">Folder 0</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.1</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.4</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 0.4</a></li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com">Folder 1</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.5</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.6</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.7</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.8</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.9</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.10</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.11</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.12</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.13</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.14</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.15</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.16</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.17</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.18</a></li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com">Item 3</a></li>
<li><a href="http://www.dynamicdrive.com">Folder 2</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 2.1</a></li>
<li><a href="http://www.dynamicdrive.com">Folder 2.1</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 2.1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Folder 3.1.1</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.1</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.4</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
</nav>

</body>
</html>