Free CSS drop down menus, including 1-level css dropdown menus all the way up to 5-level css dropdown menus | HTML-Assets.com: free HTML, PHP and javascript assets, HTML/PHP/Javascript code snippets and free HTML/PHP/Javascript source code

This is a variety of free horizontal CSS drop down menus. We have multi-level CSS dropdown menus, from 1 level deep up to 5 levels deep. All our CSS drop down menu source code is licensed under a Creative Commons Attribution license, so you can modify these CSS menus and use them in your own web development projects.

Horizontal Drop Down Menu:
1-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 1-Level Horizontal Menu</title>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav {
	position:relative;
	z-index:3 !important; /* This keeps the dropdown buttons visible above jQuery slideshows, Flash components or any absolute positioned elements below them (as long as those elements' Z-Index is less than 3) */
	width:960px;
	padding: 0;
	list-style:none;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -40px;
		}

ul#nav li a {
			color: #0f386a;
			display:block;
			width:150px;
			height:40px;
			padding: 0 20px;
			line-height:40px;
			text-align:center;
			text-transform:uppercase;
			text-decoration:none;
			font-size:14px;
			font-weight:bold;
		}

</style>

</head>

<body>

</body>
</html>

Horizontal Drop Down Menu:
2-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 2-Level Horizontal Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -40px;
		}

ul#nav li.parent a {
				width:140px;
				padding-right:30px;
			}
		
	ul#nav li ul {
		position: absolute;
		left: -9999em;
		z-index:1;
		width:192px;
		margin:0;
		padding:0;
		list-style:none;
	}
	
		ul#nav li:hover ul {
			left: auto;
		}

ul#nav li ul li {
			position:relative;
			left:-1px;
			/*float:none;*/
			background:#3467a6;
			border-top: 1px solid #6f9dd4;
			border-right: 1px solid #0f386a;
			border-bottom: 1px solid #0f386a;
			border-left: 1px solid #6f9dd4;
		}

ul#nav li ul li:hover {
				position:relative;
				left:-1px;
				background-color: #709bd0;
				background-position: 160px 0;
				border-top: 1px solid #accffa;
				border-left: 1px solid #accffa;
			}

ul#nav li ul li a {
				width:150px;
				height:auto;
				padding: 15px 20px;
				color:#fff;
				line-height: normal;
				text-align:left;
				text-decoration:none;
				font-size:14px;
				font-weight:normal;
			}

</style>

</head>

<body>

</body>
</html>

Horizontal Drop Down Menu:
3-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 3-Level Horizontal Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -40px;
		}

ul#nav li ul li.parent {
					background: #3467a6 url(http://www.html-assets.com/images/carrot2.gif) 160px -82px no-repeat;
				}

ul#nav li ul li a {
					width:150px;
					height:auto;
					padding: 15px 20px;
					color:#fff;
					line-height: normal;
					text-align:left;
					text-decoration:none;
					font-size:14px;
					font-weight:normal;
				}

ul#nav li ul li.parent a {
						width:130px;
						padding-right:40px;
					}
		
			ul#nav li ul li ul {
				margin: -47px 0 0 192px;
			}

ul#nav li ul li ul, ul#nav li:hover ul li ul {
				left: -999em;
			}

ul#nav li:hover ul, ul#nav li ul li:hover ul {
					left: auto;
				}
				
				ul#nav li:hover ul li ul, ul#nav li:hover ul li ul li ul {
					left: -999em;
				}
				
					ul#nav li:hover ul, ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul {
						left: auto;
					}

</style>

</head>

<body>

</body>
</html>

Horizontal Drop Down Menu:
4-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 4-Level Horizontal Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -40px;
		}

ul#nav li.parent a {
				width:140px;
				padding-right:30px;
			}
		
	ul#nav li ul {
		position: absolute;
		left: -9999em;
		z-index:1;
		width:192px;
		margin: 0;
		padding:0;
		list-style:none;
	}
	
		ul#nav li:hover ul {
			left: auto;
		}

ul#nav li ul li.parent {
					background: #3467a6 url(http://www.html-assets.com/images/carrot2.gif) 160px -82px no-repeat;
				}

ul#nav li ul li a {
					width:150px;
					height:auto;
					padding: 15px 20px;
					color:#fff;
					line-height: normal;
					text-align:left;
					text-decoration:none;
					font-size:14px;
					font-weight:normal;
				}

ul#nav li ul li.parent a {
						width:130px;
						padding-right:40px;
					}
		
			ul#nav li ul li ul {
				margin: -47px 0 0 192px;
			}

ul#nav li ul li ul, ul#nav li:hover ul li ul {
				left: -999em;
			}

ul#nav li:hover ul, ul#nav li ul li:hover ul {
					left: auto;
				}
				
				ul#nav li ul li ul li ul, ul#nav li:hover ul li ul, ul#nav li:hover ul li ul li ul {
					left: -999em;
				}
				
					ul#nav li:hover ul, ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul {
						left: auto;
					}

</style>

</head>

<body>

</body>
</html>

Horizontal Drop Down Menu:
5-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 5-Level Horizontal Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -40px;
		}

ul#nav li.parent a {
				width:140px;
				padding-right:30px;
			}
		
	ul#nav li ul {
		position: absolute;
		left: -9999em;
		z-index:1;
		width:192px;
		margin: 0;
		padding:0;
		list-style:none;
	}
	
		ul#nav li:hover ul {
			left: auto;
		}

ul#nav li ul li.parent {
					background: #3467a6 url(http://www.html-assets.com/images/carrot2.gif) 160px -82px no-repeat;
				}

ul#nav li ul li a {
					width:150px;
					height:auto;
					padding: 15px 20px;
					color:#fff;
					line-height: normal;
					text-align:left;
					text-decoration:none;
					font-size:14px;
					font-weight:normal;
				}

ul#nav li ul li.parent a {
						width:130px;
						padding-right:40px;
					}
		
					ul#nav li ul li ul {
						margin: -47px 0 0 192px;
					}
		
					ul#nav li:hover ul li ul {
						left: -999em;
					}
		
						ul#nav li:hover ul, ul#nav li ul li:hover ul {
							left: auto;
						}
						
						ul#nav li:hover ul li ul, ul#nav li:hover ul li ul li ul {
							left: -999em;
						}
						
							ul#nav li:hover ul, ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul {
								left: auto;
							}
		
							ul#nav li ul li:hover ul li ul, ul#nav li ul li:hover ul li ul li ul {
								left: -999em;
							}
							
								ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul, ul#nav li ul li ul li ul li:hover ul {
									left: auto;
								}

</style>

</head>

<body>

</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="parent"><a href="#" title="Menu Item 2">Menu Item 2</a>
        <ul>
            <li class="parent"><a href="#" title="Sub-Menu Item 1">Sub-Menu Item 1</a>
                <ul>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 1">Sub-Sub-Menu Item 1</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
            <li class="parent"><a href="#" title="Sub-Menu Item 2">Sub-Menu Item 2</a>
                <ul>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 1">Sub-Sub-Menu Item 1</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
            <li class="parent"><a href="#" title="Sub-Menu Item 3">Sub-Menu Item 3</a>
                <ul>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 1">Sub-Sub-Menu Item 1</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="parent"><a href="#" title="Menu Item 3">Menu Item 3</a>
        <ul>
            <li class="parent"><a href="#" title="Sub-Menu Item 1">Sub-Menu Item 1</a>
                <ul>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 1">Sub-Sub-Menu Item 1</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>

</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
            <li class="parent"><a href="#" title="Sub-Menu Item 2">Sub-Menu Item 2</a>
                <ul>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 1">Sub-Sub-Menu Item 1</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
            <li class="parent"><a href="#" title="Sub-Menu Item 3">Sub-Menu Item 3</a>
                <ul>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 1">Sub-Sub-Menu Item 1</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 2">Sub-Sub-Menu Item 2</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                    <li class="parent"><a href="#" title="Sub-Sub-Menu Item 3">Sub-Sub-Menu Item 3</a>
						<ul>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 1</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 2</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
                    		<li class="parent"><a href="#" title="Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Menu Item 3</a>
								<ul>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 1">Sub-Sub-Sub-Sub-Menu Item 1</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 2">Sub-Sub-Sub-Sub-Menu Item 2</a></li>
		                    		<li><a href="#" title="Sub-Sub-Sub-Sub-Menu Item 3">Sub-Sub-Sub-Sub-Menu Item 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

</body>
</html>

Vertical Drop Down Menu:
1-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 1-Level Vertical Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -40px;
		}

ul#nav li a {
			color: #0f386a;
			display:block;
			width:150px;
			height:46px;
			padding: 0 20px;
			line-height:46px;
			text-align:center;
			text-transform:uppercase;
			text-decoration:none;
			font-size:14px;
			font-weight:bold;
		}

</style>

</head>

<body>

</body>
</html>

Vertical Drop Down Menu:
2-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 2-Level Vertical Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/vertical-carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -48px;
		}

ul#nav li.parent a {
				width:140px;
				padding-right:30px;
			}
		
	ul#nav li ul {
		position: absolute;
		left: -9999em;
		z-index:1;
		width:192px;
		margin: -47px 0 0 192px;
		padding:0;
		list-style:none;
	}
	
		ul#nav li:hover ul {
			left: auto;
		}

</style>

</head>

<body>

</body>
</html>

Vertical Drop Down Menu:
3-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 3-Level Vertical Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/vertical-carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -48px;
		}

ul#nav li ul li.parent {
				background: #3467a6 url(http://www.html-assets.com/images/carrot2.gif) 160px -82px no-repeat;
			}

ul#nav li ul li ul {
				margin: -47px 0 0 192px;
			}

ul#nav li:hover ul li ul {
				left: -999em;
			}

</style>

</head>

<body>

</body>
</html>

Vertical Drop Down Menu:
4-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 4-Level Vertical Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/vertical-carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -48px;
		}

ul#nav li ul li.parent {
				background: #3467a6 url(http://www.html-assets.com/images/carrot2.gif) 160px -82px no-repeat;
			}

ul#nav li ul li ul {
				margin: -47px 0 0 192px;
			}

ul#nav li:hover ul li ul {
				left: -999em;
			}

</style>

</head>

<body>

</body>
</html>

Vertical Drop Down Menu:
5-Level

Example:

Click here to see an example

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 5-Level Vertical Dropdown Menu</title>

:focus {
	outline: 0;
}

html, body {
	margin:0;
	padding:0;
    height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

ul#nav li {
		float:left;
		background: #accffa;
		border-top: 1px solid #fff;
		border-right: 1px solid #4e83c4;
		border-bottom: 1px solid #4e83c4;
		border-left: 1px solid #fff;
	}

ul#nav li.parent {
			width:190px;
			background: #accffa url(http://www.html-assets.com/images/vertical-carrot1.gif) 155px 0 no-repeat;
		}

ul#nav li:hover {
			position:static;  /* This fixes an occasional IE7 error */
			background-color: #e0edfe;
			background-position: 155px -48px;
		}

ul#nav li ul li.parent {
				background: #3467a6 url(http://www.html-assets.com/images/carrot2.gif) 160px -82px no-repeat;
			}

ul#nav li ul li ul {
				margin: -47px 0 0 192px;
			}

ul#nav li:hover ul li ul {
				left: -999em;
			}

ul#nav li ul li:hover ul li ul, ul#nav li ul li:hover ul li ul li ul {
						left: -999em;
					}
					
						ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul, ul#nav li ul li ul li ul li:hover ul {
							left: auto;
						}

</style>

</head>

<body>

</body>
</html>

HTML-Assets.com: free HTML, PHP and javascript assets, HTML/PHP/Javascript code snippets and free HTML/PHP/Javascript source code

Horizontal Drop Down Menu: 1-Level

Example:

Source Code:

Horizontal Drop Down Menu: 2-Level

Example:

Source Code:

Horizontal Drop Down Menu: 3-Level

Example:

Source Code:

Horizontal Drop Down Menu: 4-Level

Example:

Source Code:

Horizontal Drop Down Menu: 5-Level

Example:

Source Code:

Vertical Drop Down Menu: 1-Level

Example:

Source Code:

Vertical Drop Down Menu: 2-Level

Example:

Source Code:

Vertical Drop Down Menu: 3-Level

Example:

Source Code:

Vertical Drop Down Menu: 4-Level

Example:

Source Code:

Vertical Drop Down Menu: 5-Level

Example:

Source Code:

Quick Links:

Horizontal Drop Down Menu:
1-Level

Horizontal Drop Down Menu:
2-Level

Horizontal Drop Down Menu:
3-Level

Horizontal Drop Down Menu:
4-Level

Horizontal Drop Down Menu:
5-Level

Vertical Drop Down Menu:
1-Level

Vertical Drop Down Menu:
2-Level

Vertical Drop Down Menu:
3-Level

Vertical Drop Down Menu:
4-Level

Vertical Drop Down Menu:
5-Level