{"id":4729,"date":"2017-04-28T10:09:58","date_gmt":"2017-04-28T10:09:58","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutorial\/?p=4729"},"modified":"2025-01-08T15:30:03","modified_gmt":"2025-01-08T08:30:03","slug":"cara-membuat-menu-css-dropdown-sederhana","status":"publish","type":"post","link":"\/id\/tutorial\/cara-membuat-menu-css-dropdown-sederhana\/","title":{"rendered":"Cara membuat menu dropdown CSS sederhana"},"content":{"rendered":"<p>User Experience (pengalaman pengguna) dan kecepatan loading website adalah hal yang sangat penting. Itulah mengapa Anda sebaiknya tidak membebani website Anda dengan elemen-elemen tambahan seperti JavaScript, atau gambar berukuran besar. Namun, bagaimana jika Anda ingin mencoba cara membuat drop down menu CSS sederhana agar website menjadi lebih cantik?<\/p><p>Untungnya, Anda tidak harus menambahkan JavaScript apa pun untuk membuatnya, cukup dengan CSS saja. Dalam tutorial ini, Anda akan mempelajari cara membuat menu dropdown CSS sederhana dengan mudah. Mari mulai!<\/p><p style=\"text-align: center\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><\/p><p style=\"text-align: center\">Selain Drop Down Menu CSS, website Anda butuh hosting andal agar performa makin ngebut dan menarik lebih banyak pengunjung. <strong>Bantuan 24\/7<\/strong>, <strong>jaminan uptime 99.9%<\/strong>, dan <strong>unlimited bandwidth<\/strong>.<\/p><p style=\"text-align: center\"><a class=\"hgr-button red\" href=\"\/id\/hosting-murah\" target=\"_blank\" rel=\"noopener noreferrer\">Hosting Murah<\/a><br>\n<\/p>\n                    <\/div>\n        <\/p><h2 id=\"h-yang-anda-butuhkan\"><strong>Yang Anda butuhkan<\/strong><\/h2><p>Sebelum memulai panduan ini, yang Anda butuhkan adalah:<\/p><ul>\n<li>Akses ke control panel hosting Anda<\/li>\n<\/ul><h2 id=\"h-cara-membuat-drop-down-menu-css-sederhana\">Cara Membuat Drop Down Menu CSS Sederhana<\/h2><p>Untuk membuat menu drop down dengan CSS, Anda hanya perlu menggunakan <strong>File Manager<\/strong> di control panel hosting Anda. Berikut langkah-langkah cara membuat menu dropdown CSS:<\/p><h3>1. Buat file HTML kosong<\/h3><p>Pertama, Anda harus membuat file HTML baru (kosong) terlebih dahulu. Di sini kami akan membuat sebuah file baru bernama <strong>menu.html<\/strong>.<\/p><ol>\n<li>Di hPanel, buka <strong>File Manager<\/strong> dari bagian <strong>File<\/strong>.<\/li>\n<li>Klik <strong>Go to File Manager &rarr; public_html<\/strong>.<\/li>\n<li>Pilih <strong>New File<\/strong> lalu buat file bernama <strong>menu.html<\/strong>.<\/li>\n<\/ol><p><img decoding=\"async\" class=\"aligncenter wp-image-30421 size-full\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2023\/05\/hpanel-file-filemanager-public_html-newfile.png\" alt=\"\" width=\"263\" height=\"231\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/05\/hpanel-file-filemanager-public_html-newfile.png\/w=263,fit=scale-down 263w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/05\/hpanel-file-filemanager-public_html-newfile.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 263px) 100vw, 263px\" \/><\/p><p>Setelah membuat file <strong>menu.html<\/strong>, Anda perlu membuat sintaksis menu.<\/p><h3><strong>2. Tambahkan kode menu HTML<\/strong><\/h3><p>Menu yang akan kami buat terdiri dari 1 elemen induk (menu utama) dan 5 submenu. Anda bisa menghubugkan setiap submenu ke halaman lain di website Anda.<\/p><p>Buka file <strong>menu.html <\/strong>lalu tambahkan sintaksis berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;div class=\"dropdown\"&gt;\r\n  &lt;button class=\"mainmenubtn\"&gt;Main Menu&lt;\/button&gt;\r\n  &lt;div class=\"dropdown-child\"&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page1.html\"&gt;Sub Menu 1&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page2.html\"&gt;Sub Menu 2&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page3.html\"&gt;Sub Menu 3&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page4.html\"&gt;Sub Menu 4&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page5.html\"&gt;Sub Menu 5&lt;\/a&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre><p>Anda mungkin menyadari bahwa setiap elemen memiliki class yang berbeda: <strong>dropdown, mainmenubtn,<\/strong> dan <strong>dropdown-child<\/strong>. Class ini diperlukan untuk menerapkan rule CSS pada langkah selanjutnya.<\/p><p>Menu HTML akan terlihat seperti ini tanpa rule CSS:<br>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-12746\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-dropdown-css-tanpa-aturan-css.png\" alt=\"Tampilan dropdown css tanpa rule css\" width=\"951\" height=\"64\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-dropdown-css-tanpa-aturan-css.png\/w=951,fit=scale-down 951w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-dropdown-css-tanpa-aturan-css.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-dropdown-css-tanpa-aturan-css.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-dropdown-css-tanpa-aturan-css.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/p><p>\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Jangan lupa mengganti URL menu dalam atribut <strong>href<\/strong> dengan URL halaman website Anda, lalu ganti nama menu-menu tersebut.<\/p>\n                    <\/div>\n        \n<\/p><h3><strong>3. Terapkan CSS dan Tambahkan Efek Dropdown<\/strong><\/h3><p>Seperti yang Anda lihat, menu HTML dengan tampilan yang sangat biasa tentunya tidak terlihat menarik. Jadi, sekarang kami akan memberi warna tombol menu dan menambahkan efek dropdown. Ubah kode HTML dengan menambahkan rule CSS berikut di atas kode sebelumnya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">.mainmenubtn {\r\n    background-color: skyblue;\r\n    color: white;\r\n    border: none;\r\n    cursor: pointer;\r\n    padding:20px;\r\n    margin-top:20px;\r\n}\r\n.mainmenubtn:hover {\r\n    background-color: blue;\r\n    }\r\n.dropdown {\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n.dropdown-child {\r\n    display: none;\r\n    background-color: skyblue;\r\n    min-width: 200px;\r\n}\r\n.dropdown-child a {\r\n    color: blue;\r\n    padding: 20px;\r\n    text-decoration: none;\r\n    display: block;\r\n}\r\n.dropdown:hover .dropdown-child {\r\n    display: block;\r\n}<\/pre><p>\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Anda boleh bereksperimen dengan kode CSS di atas untuk mengubah warna dan ukurannya sesuai keinginan.<\/p>\n                    <\/div>\n        \n<\/p><p>Tampilan akhir file <strong>menu.html<\/strong> akan terlihat seperti berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\n.mainmenubtn {\r\n    background-color: skyblue;\r\n    color: white;\r\n    border: none;\r\n    cursor: pointer;\r\n    padding:20px;\r\n    margin-top:20px;\r\n}\r\n.mainmenubtn:hover {\r\n    background-color: blue;\r\n    }\r\n.dropdown {\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n.dropdown-child {\r\n    display: none;\r\n    background-color: skyblue;\r\n    min-width: 200px;\r\n}\r\n.dropdown-child a {\r\n    color: blue;\r\n    padding: 20px;\r\n    text-decoration: none;\r\n    display: block;\r\n}\r\n.dropdown:hover .dropdown-child {\r\n    display: block;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div class=\"dropdown\"&gt;\r\n  &lt;button class=\"mainmenubtn\"&gt;Main Menu&lt;\/button&gt;\r\n  &lt;div class=\"dropdown-child\"&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page1.html\"&gt;Sub Menu 1&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page2.html\"&gt;Sub Menu 2&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page3.html\"&gt;Sub Menu 3&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page4.html\"&gt;Sub Menu 4&lt;\/a&gt;\r\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page5.html\"&gt;Sub Menu 5&lt;\/a&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre><p>\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Pada contoh ini, <em>style<\/em> CSS disimpan dalam file HTML yang sama (stylesheet internal). Anda boleh membuat file CSS sendiri dan <strong><a href=\"\/id\/tutorial\/perbedaan-inline-css-external-css-dan-internal-css\/\" target=\"_blank\" rel=\"noopener\">mengaitkannya<\/a><\/strong> ke dokumen HTML apa pun.<\/p>\n                    <\/div>\n        \n<\/p><p>Setelah selesai, simpan dan unduh file. Berikut tampilannya jika file dibuka di browser:<br>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-12747\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-akhir-menu-dropdown-css.png\" alt=\"Tampilan akhir menu dropdown CSS\" width=\"950\" height=\"405\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-akhir-menu-dropdown-css.png\/w=950,fit=scale-down 950w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-akhir-menu-dropdown-css.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-akhir-menu-dropdown-css.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/tampilan-akhir-menu-dropdown-css.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/p><h2 id=\"h-cara-menampilkan-menu-dropdown-pada-tema-anda\"><span id=\"Inserting-the-Dropdown-Menu-to-Your-Theme\">Cara Menampilkan Menu Dropdown pada Tema Anda<\/span><\/h2><p>Setelah menyelesaikan cara membuat drop down menu CSS sederhana, sekarang saatnya menampilkan menu dropdown CSS pada tema Anda. Untuk melakukannya, lampirkan dokumen HTML ke file template tema menggunakan fungsi <strong><a href=\"https:\/\/www.php.net\/manual\/en\/function.readfile.php\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-wpel-link=\"external\">readfile()<\/a><\/strong>. Lakukan langkah ini melalui <strong>File Manager<\/strong>:<\/p><ol>\n<li>Di folder <strong>public_html<\/strong>, cari<strong>&nbsp;wp_content -&gt; themes<\/strong>. Buka folder tema yang saat ini Anda gunakan.<\/li>\n<li>Di sini, kami akan meletakkan menu dropdown CSS di header. Buka file <strong>header.php<\/strong> lalu tempelkan (paste) sintaksis berikut ini di bagian bawah isi file.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;?php\r\n\/\/ do php stuff\r\n\r\nreadfile('menu.html');\r\n\r\n?&gt;<\/pre>\n<\/li>\n<li><strong>Simpan <\/strong>perubahan Anda.<\/li>\n<\/ol><p>Muat ulang situs Anda untuk melihat menu dropdown yang sudah terpasang.<\/p><p><img decoding=\"async\" class=\"alignnone size-full wp-image-12749\" src=\"https:\/\/www.hostinger.com\/id\/tutorial\/wp-content\/uploads\/sites\/37\/2017\/04\/menu-drop-down-sudah-terpasang.png\" alt=\"Menu drop down sudah terpasang\" width=\"1024\" height=\"383\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/menu-drop-down-sudah-terpasang.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/menu-drop-down-sudah-terpasang.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/menu-drop-down-sudah-terpasang.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2017\/04\/menu-drop-down-sudah-terpasang.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p><p>\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Anda bisa membuat file <strong>menu.html<\/strong> di komputer lalu mengunggahnya ke akun hosting menggunakan <strong><a href=\"\/id\/tutorial\/cara-menggunakan-filezilla\/\" target=\"_blank\" rel=\"follow noopener\" data-wpel-link=\"internal\">FTP client<\/a><\/strong> atau Notepad++. Kemudian, Anda perlu menambahkan file ke tema yang saat ini digunakan menggunakan sintaksis di atas.<\/p>\n                    <\/div>\n        \n<\/p><h2 id=\"h-kesimpulan\"><strong>Kesimpulan<\/strong><\/h2><p>Selesai! Anda kini sudah mempelajari cara membuat drop down menu CSS sederhana melalui tutorial ini.<\/p><p>Menu dropdown penting untuk menjadikan tampilan website Anda lebih rapi dan responsive. Salah satu cara mudah untuk membuat menu dropdown adalah dengan menggunakan rule CSS di file HTML. Untuk melakukannya, gunakan <strong>File Manager <\/strong>di hPanel Anda lalu tambahkan file ke tema saat ini menggunakan fungsi PHP <strong>readfile()<\/strong>.<\/p><p>Selamat mencoba!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>User Experience (pengalaman pengguna) dan kecepatan loading website adalah hal yang sangat penting. Itulah mengapa Anda sebaiknya tidak membebani website Anda dengan elemen-elemen tambahan seperti JavaScript, atau gambar berukuran besar. Namun, bagaimana jika Anda ingin mencoba cara membuat drop down menu CSS sederhana agar website menjadi lebih cantik?Untungnya, Anda tidak harus menambahkan JavaScript apa pun [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-membuat-menu-css-dropdown-sederhana\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":5451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cara Membuat Drop Down Menu CSS Sederhana","rank_math_description":"Mencari cara membuat drop down menu CSS sederhana agar website tampak lebih dinamis? Baca panduan mudah dan lengkapnya di artikel ini!","rank_math_focus_keyword":"Cara Membuat Drop Down Menu CSS Sederhana, Cara Membuat Menu Dropdown, dropdown CSS","footnotes":""},"categories":[4983],"tags":[5225,5224,5221,5223,5222],"class_list":["post-4729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-css","tag-drop-down","tag-drop-down-menu","tag-drop-down-menu-css","tag-drop-down-menu-html"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/4729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=4729"}],"version-history":[{"count":14,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/4729\/revisions"}],"predecessor-version":[{"id":30524,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/4729\/revisions\/30524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/5451"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=4729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=4729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=4729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}