Cara membuat Menu Horizontal, Hover dan Dropdown

Assalamualaikum Wr.Wb.

Hai Para Blogger...
Masih dengan blog saya hari ini, kali ini share tentang cara membuat menu horizontal, hover dan dropdown di web.

Pengertian:

Dropdown adalah bentuk menu yang menurun kebawah atau kesamping pada tampilan Graphical User Interface. Serupa dengan list box, yang memungkinkan user memilih salah satu opsi dari list yang tersedia.

Latar Belakang:

Latar belakang share materi kali ini, agar bisa membuat tampilan web lebih bagus.

Alat dan Bahan:

Laptop/ Komputer.
Sublime text

Maksud dan Tujuan:

Maksud dan tujuan share materi diatas , untuk mempercantik agar tampilan web lebih bagus dan bisa menghemat link pada menu.

Langkah - langkah pembuatan web seperti gambar diatas:

Buka sublime text,
ketikkan syntax html:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</li>
</ul>

<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}
</script>

</body>
</html>

3.kemudian untuk mempercantiktampilan,ketikkanlah syntax CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}