Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.