Cara Membuat Multilevel Dropdown Menu

Di panduan kali ini sahabat akan belajar bagaimana cara merancang Multilevel Dropdown Fitur  dengan menggunakan HTML dan CSS.

Di dasarnya sebuah fitur ialah bagian yang betul-betul fatal untuk sebuah situs dimana fitur navigasi bermanfaat bagi mengantarkan user bagi melihat bagian lain dari situs kita . Bagi itu di butuhkan sebuah design fitur atau navigasi yang betul-betul menolong dan tak merancang user bingung pada mencari bagian lain dari halaman situs kita, pemakaian multilevel dropdown fitur betul-betul dibutuhkan apa bila di situs kita banyak sekali halaman .

Seketika 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=>Fitur</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;
}

Bila telah kalian salin silakan di coba di browsernya masing-masing, kurang lebih hasilnya akan seperti ini :

Oke itu dia hasilnya,hingga bertemu di artikel berikutnya.

Sumber https://kursuswebsite.org