Home Menu and Navigation Multiple Level Menus All Levels Navigational Menu Here
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css"
/>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css"
/>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css"
/>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-mobile.css"
/>
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<h3>All Levels Navigtional Menu: Top Menu Bar Example</h3>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li rel="ddsubmenu1"><a
href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li rel="ddsubmenu2"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li rel="ddsubmenu3"><a href="http://tools.dynamicdrive.com/">Web Tools</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid",
"topbar|sidebar")
</script>
<a class="animateddrawer" id="ddtopmenubar-mobiletoggle" href="#">
<span></span>
</a>
<p style="margin-top: 2em">More info/ documentation: <a
href="http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/">All Levels
Navigational Menu</a></p>
<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag
itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->
<!--Top Drop Down Menu 1 HTML-->
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</a>
</li>
<li><a href="#">Item 6a</a></li>
</ul>
<!--Top Drop Down Menu 2 HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
<ul>
<li><a href="#">Sub Item 3.1b</a></li>
<li><a href="#">Sub Item 3.2b</a></li>
<li><a href="#">Sub Item 3.3b</a></li>
<li><a href="#">Sub Item 3.4b</a></li>
</ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul>
<li><a href="#">Sub Item 5.2.1b</a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#">Sub Item 5.2.3b</a></li>
</ul>
</li>
</ul>
</a>
</li>
<li><a href="#">Item 6b</a></li>
</ul>
<!--Top Drop Down Menu 3 HTML-->
<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image
Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>
</ul>
</body>
</html>