tutweb/multilevel-dropdown-menu.html

## multilevel-dropdown-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Multilevel Dropdown Menu dengan CSS | Jurnalweb.com</title>
	<meta name="description" content="Tutorial cara membuat multilevel dropdown menu dengan CSS tanpa perlu javascript sama sekali">
	<meta name="keywords" content="css, menu, dropdown menu, menu dropdown, web design, desain web, multilevel menu, multilevel dropdown">
	<style type="text/css">
		.nav {
		    width: auto;
		    height: 60px;
		    float: left;
		    height: 60px;
		    margin: auto;
		}
		.nav ul {
		    list-style: none;
		    display: inline-table;
		    position: relative;
		    padding: 0 20px;
		    background: #006faa;
		}
		.nav ul li:hover > ul {
		    display: block;
		}
		.nav ul:after {
		    content: "";
		    clear: both;
		    display: block;
		}
		.nav ul li {
		    float: left;
		}
		.nav ul li a{
		    padding: 20px;
		    text-decoration: none;
		    color: #ececec;
		    display: block;
		    cursor: pointer;
		}
		.nav ul ul {
		    background: #006faa;
		    border-radius: 0px;
		    padding: 0;
		    position: absolute;
		    top: 100%;
		    display: none;
		}
		.nav ul ul li {
		    float: none;
		    border-top: 1px solid #def4ff;
		    border-bottom: 1px solid #def4ff;
		    position: relative;
		}
		.nav ul ul li a {
		    padding: 15px 40px;
		}
		.nav ul ul ul {
		    position: absolute;
		    left: 100%;
		    top: 0;
		}
	</style>
</head>
<body>

<header>
	<h1>Contoh Multilevel Dropdown Menu dengan CSS</h1>
	<p>Tutorial cara membuat lihat di <a href="http://www.jurnalweb.com/cara-membuat-multilevel-dropdown-menu-css">Jurnalweb.com</a></p>
</header>

<div class="nav">

<ul>
	<li><a href="">Home</a></li>
	<li><a href="">News</a></li>
	<li><a href="">Article</a></li>
	<li><a href="">Dropdown</a>

	<ul>
		<li><a href="">Submenu1</a></li>
		<li><a href="">Submenu2</a></li>
		<li><a href="">Submenu3</a>
		<ul>
			<li><a href="">Subsubmenu1</a></li>
			<li><a href="">Subsubmenu2</a></li>
			<li><a href="">Subsubmenu3</a>
			<ul>
				<li><a href="">subsubsubmenu1</a></li>
				<li><a href="">subsubsubmenu2</a></li>
				<li><a href="">subsubsubmenu3</a></li>
			</ul>
			</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

</div> <!--/ .nav -->

</body>
</html>