<!--Tombol Menu--><span style="font-size: x-small;"><button class="menu-btn" onclick="toggleMenu()">
<span style="font-family: Arial Rounded;">Artikel lainnya</span><span style="font-family: Caveatbrush;"> </span>▼
</button>
<!--Dropdown Menu-->
</span><div class="menu-dropdown" id="menuDropdown">
<a href="https://profil2017.blogspot.com/2017/02/m-u-s-f-i-r.html">🔹Penulis</a>
<a href="https://musafirjmi.blogspot.com/2018/08/islam-itu-indah-dan-damai.html">🔹Religi</a>
<a href="https://mekanikalmesin.blogspot.com/2017/07/teknik-mesin.html?m=1">🔹Teknik Mesin</a>
<a href="https://mekanikeletronik.blogspot.com/">🔹Teknik Elektronik</a>
<a href="https://www.facebook.com/musafirjmi">🔹Facebook</a>
</div><div class="menu-dropdown" id="menuDropdown"><br /></div><div class="menu-dropdown" id="menuDropdown"><br /></div><div class="menu-dropdown" id="menuDropdown"><br /></div>
<style>
/* Tombol Menu */
.menu-btn {
background-color: gray;
color: white
padding: 3px;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 3px;
}
.menu-btn:hover {
background-color: #5a0ca3;
}
/* Dropdown Menu */
.menu-dropdown {
display: none;
position: absolute;
background-color: white; /* putih solid */
min-width: 130px 2px 10px red;
border-radius: 5px;
border: 1px solid grey;
padding: 10px 0;
z-index: 1000;
}
.menu-dropdown a {
display: block;
color: black;
padding: 10px 20px;
text-decoration: none;
}
.menu-dropdown a:hover {
background-color: #f0f0f0;
}
</style>
<script>
function toggleMenu() {
var menu = document.getElementById("menuDropdown");
if (menu.style.display === "block") {
menu.style.display = "none";
} else {
menu.style.display = "block";
}
}
// Tutup dropdown jika klik di luar
window.onclick = function(event) {
if (!event.target.matches('.menu-btn')) {
var dropdowns = document.getElementsByClassName("menu-dropdown");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style.display === "block") {
openDropdown.style.display = "none";
}
}
}
}
</script>