Cara Membuat Multilevel Dropdown Menu

Pada tutorial kali ini anda akan belajar bagaimana cara membuat Multilevel Dropdown Menu dengan menggunakan HTML dan CSS.

Pada dasarnya sebuah menu adalah bagian yang sangat fatal bagi sebuah website dimana menu navigasi berguna untuk mengantarkan user untuk melihat bagian lain dari website kita . Untuk itu di butuhkan sebuah design menu atau navigasi yang sangat membantu dan tidak membuat user bingung dalam mencari bagian lain dari halaman website kita, penggunaan multilevel dropdown menu sangat dibutuhkan apa bila di website kita banyak sekali halaman .

Langsung saja kita akan coba membuatnya, saya telah membaginya kedalam dua file yaitu HTML dan CSS.

HTML//

<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="">Menu</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 -->

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;
}

Jika sudah kalian salin silakan di coba pada browsernya masing-masing, kurang lebih hasilnya akan seperti ini :

Oke itu dia hasilnya,sampai bertemu pada artikel selanjutnya.

Kategori