Tips Membuat Menu Didalam Menu Dengan HTML5 CSS3
Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan mengenai Tips Membangun Fitur Didalam Fitur Dengan HTML5 CSS3, teman teman pernah yah melihat suatu situs yang terdapat fitur yang banyak
namun dihalaman utamanya terlihat menunya sedikit tapi ketika kursor yang kita tuju ke suatu fitur karenanya akan muncul fitur didalamnya, sesungguhnya sederhana saja pada proses pembuatannya lumayan dengan css3 saja, oke tanpa berlama lama kita seketika saja yah, teman teman dapat seketika coba dan salinkan scriptnya dibawah sini :
<body>
<div class=container>
<nav>
<ul>
<li><a href=>BERANDA</a></li>
<li><a href=>PROFIL</a></li>
<li class=ser><a href=>SERVIS</a>
<div class=tampung>
<div class=atas>
<div class=kiri>
<ul>
<li><a href=>MENU KIRI</a></li>
<li><a href=>MENU TENGAH</a></li>
<li><a href=>MENU KANAN</a></li>
</ul>
</div>
<div class=tengah>
<ul>
<li><a href=>MENU TENGAH</a></li>
<li><a href=>MENU TENGAH</a></li>
<li><a href=>MENU TENGAH</a></li>
</ul>
</div>
<div class=kanan>
<ul>
<li><a href=>MENU KANAN</a></li>
<li><a href=>MENU KANAN</a></li>
<li><a href=>MENU KANAN</a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href=>KONTAK</a></li>
<li><a href=>TESTIMONI</a></li>
</ul>
</nav>
</div>
</body>
lalu salinkan pun css :
<style>
* {padding: 0; margin: 0}
body {background: #eee}
.container {width: 900px; margin: auto;}
/* MENU */
nav {width: 750px;}
nav ul li {float: left; width: 20%; list-style: none}
nav li a {text-decoration: none; color: red; display: block; padding: 10px;}
nav li a:hover {color: black;}
nav ul .ser:hover .atas {display: block;position: absolute; top: 40px; left:0; width: 100%; margin: auto;}
/* tampung */
.tampung { width: 100%; }
.atas {width: 800px; margin: auto; overflow: hidden; display: none;border-top: 1px solid black}
/* MENU KIRI */
.kiri {float: left; width: 300px; margin-left: 500px; }
.kiri ul li {list-style: none; float: none; width: 45%}
.kiri li a{text-decoration: none; color: red; display: block !important; padding: 10px;}
.kiri li a:hover {background: lightblue; color: red}
/* MENU TENGAH */
.tengah {float: left; margin-left: -20px; width: 300px}
.tengah ul li {list-style: none; float: none; width: 45%}
/* MENU KANAN */
.kanan {float: right; width: 300px; margin-right: 538px;}
.kanan ul li {list-style: none; float: none; width: 45%}
</style>
Apabila telah coba teman teman save dan jalankan lalu arahkan cursornya ke fitur SERVIS karenanya terdapat fitur lagi didalamnya, oke lumayan gampang yah, demikianlah panduan mengenai Tips Membangun Fitur Didalam Fitur Dengan HTML5 CSS3 hingga bertemu di artikel berikutnya dan hingga jumpa, SELAMAT MENCOBA .
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
