Menu navigasi top murni hanya menggunakan css dan html
Screenshot :
Kode lengkap nya :
Sekarang kita menuju tutorial penerapan nya :
Letakan css di bawah ini di bawah <style> atau di atas </style>
Hasil nya :
Screenshot :
Kode lengkap nya :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>Index</title>
<style>
#menutop ul,
#menutop li,
#menutop span,
#menutop a
{ margin: 0; padding: 0;
position: relative; }
#menutop { height: 50px;
background: #1669aa; border-bottom: 10px solid #fff; width: auto; } #menutop:after, #menutop ul:after { content: ''; display:
block; clear: both; } #menutop a { background: #1669aa; color: #fff;
display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 50px; padding: 0 20px; text-decoration: none; } #menutop ul { list-style: none; }
#menutop > ul, #menutop > ul > li { float: left; } #menutop > ul > li > a { color: #fff; font-size: 12px; } #menutop > ul > li:hover:after { content: ''; display: block;
width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; margin-left: -10px; }
#menutop > ul > li.active:after { content: ''; display: block;
width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; margin-left: -10px; }
#menutop > ul > li.active > a, #menutop > ul > li:hover > a { background: #1669aa; } #menutop .menu-sub { z-index: 1; } #menutop .menu-sub:hover > ul { display: block; }
#menutop .menu-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #menutop .menu-sub ul li { margin-bottom: 0px; } #menutop .menu-sub ul li a { background: #222; border-bottom: 1px solid #fff; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #menutop .menu-sub ul li:hover a { background: #222; }
#menutop .menu-sub .menu-sub:hover > ul { display: block; } #menutop .menu-sub .menu-sub ul { display: none; position: absolute; left: 100%; top: 0; } #menutop .menu-sub .menu-sub ul li a { background: #222; border-bottom: 1px solid #fff; }
#menutop .menu-sub .menu-sub ul li a:hover { background: #222222; }
</style>
</head>
<body>
<div id='menutop'>
<ul>
<li class='active'> <a href='/' target='_blank'><span>Home</span></a></li> <li class='menu-sub'>
<a href='#'><span>Contact</span></a> <ul> <li class='menu-sub'>
<a href='#'><span>Via email</span></a></li>
<li><a href='#'><span>Via whatsapp</span></a></li>
</ul>
<li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Privacy</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8"> <title>Index</title>
<style>
#menutop ul,
#menutop li,
#menutop span,
#menutop a
{ margin: 0; padding: 0;
position: relative; }
#menutop { height: 50px;
background: #1669aa; border-bottom: 10px solid #fff; width: auto; } #menutop:after, #menutop ul:after { content: ''; display:
block; clear: both; } #menutop a { background: #1669aa; color: #fff;
display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 50px; padding: 0 20px; text-decoration: none; } #menutop ul { list-style: none; }
#menutop > ul, #menutop > ul > li { float: left; } #menutop > ul > li > a { color: #fff; font-size: 12px; } #menutop > ul > li:hover:after { content: ''; display: block;
width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; margin-left: -10px; }
#menutop > ul > li.active:after { content: ''; display: block;
width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; margin-left: -10px; }
#menutop > ul > li.active > a, #menutop > ul > li:hover > a { background: #1669aa; } #menutop .menu-sub { z-index: 1; } #menutop .menu-sub:hover > ul { display: block; }
#menutop .menu-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #menutop .menu-sub ul li { margin-bottom: 0px; } #menutop .menu-sub ul li a { background: #222; border-bottom: 1px solid #fff; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #menutop .menu-sub ul li:hover a { background: #222; }
#menutop .menu-sub .menu-sub:hover > ul { display: block; } #menutop .menu-sub .menu-sub ul { display: none; position: absolute; left: 100%; top: 0; } #menutop .menu-sub .menu-sub ul li a { background: #222; border-bottom: 1px solid #fff; }
#menutop .menu-sub .menu-sub ul li a:hover { background: #222222; }
</style>
</head>
<body>
<div id='menutop'>
<ul>
<li class='active'> <a href='/' target='_blank'><span>Home</span></a></li> <li class='menu-sub'>
<a href='#'><span>Contact</span></a> <ul> <li class='menu-sub'>
<a href='#'><span>Via email</span></a></li>
<li><a href='#'><span>Via whatsapp</span></a></li>
</ul>
<li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Privacy</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Sekarang kita menuju tutorial penerapan nya :
Letakan css di bawah ini di bawah <style> atau di atas </style>
#menutop ul,
#menutop li,
#menutop span,
#menutop a
{ margin: 0; padding: 0;
position: relative; }
#menutop { height: 50px;
background: #1669aa;
border-bottom: 10px
solid #fff; width: auto; }
#menutop:after,
#menutop ul:after
{ content: ''; display: block;
clear: both; }
#menutop a { background:
#1669aa; color: #fff;
display: inline-block; font-family:
Helvetica, Arial, Verdana, sans-serif;
font-size: 12px; line-height:
50px; padding: 0 20px;
text-decoration: none; }
#menutop ul { list-style: none; }
#menutop > ul,
#menutop > ul > li { float: left; }
#menutop > ul > li > a
{ color: #fff; font-size: 12px; }
#menutop > ul > li:hover:after
{ content: ''; display: block;
width: 0; height: 0; position:
absolute; left: 50%; bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
margin-left: -10px; }
#menutop > ul > li.active:after
{ content: ''; display: block;
width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; margin-left: -10px; }
#menutop > ul > li.active > a,
#menutop > ul > li:hover > a
{ background: #1669aa; }
#menutop .menu-sub { z-index: 1; } #menutop .menu-sub:hover > ul { display: block; }
#menutop .menu-sub ul
{ display: none; position: absolute;
width: 200px; top: 100%; left: 0; }
#menutop .menu-sub ul li
{ margin-bottom: 0px; }
#menutop .menu-sub ul li a
{ background: #222;
border-bottom: 1px solid #fff;
filter: none; font-size: 11px;
display: block; line-height: 120%;
padding: 10px; color: #ffffff; }
#menutop .menu-sub ul li:hover a { background: #222; }
#menutop .menu-sub
.menu-sub:hover > ul
{ display: block; }
#menutop .menu-sub .menu-sub ul
{ display: none; position: absolute; left: 100%; top: 0; }
#menutop .menu-sub .menu-sub ul li a { background: #222; border-bottom: 1px solid #fff; }
#menutop .menu-sub .menu-sub ul li a:hover { background: #222222; }
Lalu letakan html ini di atas <header>
<div id='menutop'>
<ul>
<li class='active'>
<a href='/' target='_blank'><span>Home</span></a></li>
<li class='menu-sub'>
<a href='#'><span>Contact</span></a>
<ul>
<li class='menu-sub'>
<a href='#'><span>Via email</span></a></li>
<li><a href='#'><span>Via whatsapp</span></a></li>
</ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Privacy</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Hasil nya :