{"id":4736,"date":"2021-06-03T14:32:12","date_gmt":"2021-06-03T17:32:12","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=4736"},"modified":"2026-03-10T13:01:04","modified_gmt":"2026-03-10T16:01:04","slug":"como-criar-um-menu-suspenso-css-simples-2","status":"publish","type":"post","link":"\/pt\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2","title":{"rendered":"Como criar um menu suspenso HTML usando CSS"},"content":{"rendered":"<p class=\"wp-block-paragraph\">A experi&ecirc;ncia do usu&aacute;rio e o tempo de carregamento do site s&atilde;o cr&iacute;ticos. &Eacute; por isso que voc&ecirc; n&atilde;o deve carregar seu site com JavaScript adicional ou imagens grandes. Mas o que fazer se voc&ecirc; quiser ter um bom olhar CSS dropdown menu? N&atilde;o h&aacute; necessidade de usar JavaScript para isso, hoje drop down efeito pode ser criado usando apenas CSS. Neste tutorial voc&ecirc; aprender&aacute; como &eacute; simples criar um menu suspenso CSS.<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/CSS-cheatsheet-Hostinger-BR.pdf\" target=\"_blank\" rel=\"noopener\">Baixe o Guia de Recursos CSS Completo<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-tutorial-em-video\">Tutorial em V&iacute;deo<\/h2><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Como Criar um Menu WordPress ? (2024) Hostinger Brasil\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/AEYQragZtQs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><h3 class=\"wp-block-heading\" id=\"h-passo-1-crie-um-arquivo-html-em-branco\"><strong>Passo 1.&nbsp; Crie um Arquivo HTML em Branco<\/strong><\/h3><p class=\"wp-block-paragraph\">A primeira coisa &eacute; criar um arquivo HTML para o seu menu.<\/p><ol class=\"wp-block-list\">\n<li>No seu hPanel, selecione&nbsp;<strong>Gerenciador de Arquivos<\/strong> na se&ccedil;&atilde;o&nbsp;<strong>Arquivos<\/strong>.<\/li>\n\n\n\n<li>Clique em&nbsp;<strong>Ir para o Gerenciador de Arquivo &rarr; public_html.<\/strong><\/li>\n\n\n\n<li>Selecione o bot&atilde;o <strong>New File<\/strong> (Novo Arquivo) e crie um arquivo chamado&nbsp;<strong>menu.html.<\/strong><\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"530\" height=\"464\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/05\/filemanager-newfile-highlighted-pt.png\/public\" alt=\"Cria&ccedil;&atilde;o de um novo arquivo no Hostinger File Manager\" class=\"wp-image-35400\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/05\/filemanager-newfile-highlighted-pt.png\/w=530,fit=scale-down 530w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/05\/filemanager-newfile-highlighted-pt.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/05\/filemanager-newfile-highlighted-pt.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/figure><\/div><p class=\"has-text-align-center wp-block-paragraph\"><\/p><p class=\"wp-block-paragraph\">Agora que voc&ecirc; criou o arquivo menu.html, &eacute; hora de gerar a sintexe do menu.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-2-adicione-o-codigo-do-menu-html\"><strong>Passo 2. Adicione o C&oacute;digo do Menu HTML<\/strong><\/h3><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Aqui, vamos criar um bot&atilde;o de menu que consiste de um menu principal (menu pai) e cinco sub-menus (menus filhos). Voc&ecirc; pode linkar cada sub-menu com diferentes p&aacute;ginas no seu site.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Abra o menu.html e adicione a seguinte sintaxe:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"dropdown\"&gt;\n  &lt;button class=\"mainmenubtn\"&gt;Main Menu&lt;\/button&gt;\n  &lt;div class=\"dropdown-child\"&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina1.html\"&gt;Sub Menu 1&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina2.html\"&gt;Sub Menu 2&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina3.html\"&gt;Sub Menu 3&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina4.html\"&gt;Sub Menu 4&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina5.html\"&gt;Sub Menu 5&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Voc&ecirc; pode notar que cada elemento tem classes diferentes &mdash; <\/span><b>dropdown<\/b><span style=\"font-weight: 400\">, <\/span><b>mainmenubtn<\/b><span style=\"font-weight: 400\"> e<\/span><b> dropdown-child<\/b><span style=\"font-weight: 400\">. Essas classes s&atilde;o necess&aacute;rias para aplicar diferentes regras CSS no pr&oacute;ximo passo.<\/span><\/p><p class=\"wp-block-paragraph\">&Eacute; assim que o menu HTML fica sem quaisquer regras de CSS:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/03\/plainmenu.png\/public\" alt=\"Plain menu\"><\/figure><p>        <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\">N&atilde;o se esque&ccedil;a de mudar a URL do menu dentro do atributo <strong>href<\/strong> com a URL das p&aacute;ginas do seu site, e nem de renomear os menus.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-etapa-3-aplique-o-css-e-crie-o-efeito-de-dropdown\"><strong>Etapa 3 &ndash; Aplique o CSS e Crie o Efeito de Dropdown<\/strong><\/h3><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Como voc&ecirc; pode ver, o menu HTML simples n&atilde;o &eacute; atraente. Ent&atilde;o agora vamos colorir o bot&atilde;o do menu e criar um efeito de <\/span><i><span style=\"font-weight: 400\">dropdown<\/span><\/i><span style=\"font-weight: 400\">. Estilize o c&oacute;digo HTML ao colocar as seguintes regras CSS em cima do c&oacute;digo anterior:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.mainmenubtn {\n    background-color: skyblue;\n    color: white;\n    border: none;\n    cursor: pointer;\n    padding:20px;\n    margin-top:20px;\n}\n.mainmenubtn:hover {\n    background-color: blue;\n    }\n.dropdown {\n    position: relative;\n    display: inline-block;\n}\n.dropdown-child {\n    display: none;\n    background-color: skyblue;\n    min-width: 200px;\n}\n.dropdown-child a {\n    color: blue;\n    padding: 20px;\n    text-decoration: none;\n    display: block;\n}\n.dropdown:hover .dropdown-child {\n    display: block;\n}<\/pre><p>        <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\">Sinta-se livre para experimentar com o CSS ao mudar as cores e os tamanhos para se adequar &agrave;s suas necessidades.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">O documento&nbsp;<strong>menu.html<\/strong> final dever&aacute; ficar parecido com esse:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.mainmenubtn {\n    background-color: skyblue;\n    color: white;\n    border: none;\n    cursor: pointer;\n    padding:20px;\n    margin-top:20px;\n}\n.mainmenubtn:hover {\n    background-color: blue;\n    }\n.dropdown {\n    position: relative;\n    display: inline-block;\n}\n.dropdown-child {\n    display: none;\n    background-color: skyblue;\n    min-width: 200px;\n}\n.dropdown-child a {\n    color: blue;\n    padding: 20px;\n    text-decoration: none;\n    display: block;\n}\n.dropdown:hover .dropdown-child {\n    display: block;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"dropdown\"&gt;\n  &lt;button class=\"mainmenubtn\"&gt;Main Menu&lt;\/button&gt;\n  &lt;div class=\"dropdown-child\"&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page1.html\"&gt;Sub Menu 1&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page2.html\"&gt;Sub Menu 2&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page3.html\"&gt;Sub Menu 3&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page4.html\"&gt;Sub Menu 4&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page5.html\"&gt;Sub Menu 5&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>        <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\">Neste exemplo, os estilos de CSS est&atilde;o posicionados no mesmo arquivo HTML (stylesheet interna). Contudo, voc&ecirc; pode criar um arquivo CSS separado e <a href=\"\/tutoriais\/diferenca-entre-estilos-css\" target=\"_blank\" rel=\"noopener\">link&aacute;-lo<\/a> com quaisquer documentos HTML.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Assim que voc&ecirc; tiver terminado, salve e baixe o arquivo. Voc&ecirc; ver&aacute; isso aqui quando abri-lo em seu navegador:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"950\" height=\"405\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/previa-menu-suspenso.png\/public\" alt=\"pr&eacute;via do menu suspenso feito em html\" class=\"wp-image-23702\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/previa-menu-suspenso.png\/w=950,fit=scale-down 950w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/previa-menu-suspenso.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/previa-menu-suspenso.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/previa-menu-suspenso.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure><\/div><p class=\"has-text-align-center wp-block-paragraph\"><\/p><h2 class=\"wp-block-heading\" id=\"h-como-inserir-o-menu-suspenso-no-seu-tema\"><b>Como Inserir o Menu Suspenso no seu Tema<\/b><\/h2><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Para exibir o menu suspenso, voc&ecirc; precisar&aacute; anexar o documento HTML no template do seu tema usando a fun&ccedil;&atilde;o <\/span><a href=\"http:\/\/www.w3big.com\/pt\/php\/func-filesystem-readfile.html\" target=\"_blank\" rel=\"noopener\"><b>readfile()<\/b><\/a><span style=\"font-weight: 400\">. Para isso, execute esses passos no seu <\/span><b>Gerenciador de Arquivos<\/b><span style=\"font-weight: 400\">:<\/span><\/p><ol class=\"wp-block-list\">\n<li>Na pasta&nbsp;<strong>public_html<\/strong>, v&aacute; at&eacute;&nbsp;<strong>wp_content -&gt; themes<\/strong>. Ent&atilde;o, acesse a sua pasta de temas que est&aacute; em uso.<\/li>\n\n\n\n<li>Aqui, voc&ecirc; vai colocar o menu no cabe&ccedil;alho. Abra o arquivo <strong>header.php<\/strong> e cole a seguinte sintaxe na parte inferior do conte&uacute;do do arquivo. <code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">&lt;?php \/\/ do php stuff readfile('menu.html'); ?&gt;<\/code>  <\/li>\n\n\n\n<li><strong>Salve<\/strong> suas altera&ccedil;&otilde;es e feche o documento.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Recarregue o seu site e voc&ecirc; ver&aacute; que o menu suspenso j&aacute; est&aacute; aplicado nele.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/menu-suspenso-aplicado.png\/public\" alt=\"menu suspenso aplicado no site\" class=\"wp-image-23705\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/menu-suspenso-aplicado.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/menu-suspenso-aplicado.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/menu-suspenso-aplicado.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2017\/04\/menu-suspenso-aplicado.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p class=\"has-text-align-center wp-block-paragraph\"><\/p><p>        <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\">Voc&ecirc; pode criar um arquivo <strong>menu.html<\/strong> no seu computador de maneira local e ent&atilde;o fazer upload dele para a sua conta de hospedagem usando um <a href=\"\/tutoriais\/como-configurar-o-cliente-filezilla\"><strong>cliente FTP<\/strong><\/a> ou o <a href=\"\/tutorials\/how-to-connect-to-ftp-with-notepad\/\"><strong>Notepad++<\/strong><\/a>. Ent&atilde;o, insira o arquivo no seu tema atual com a sintaxe acima.<\/p>\n                    <\/div>\n        \n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/pt\/hospedagem-barata\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Um menu suspenso &eacute; essencial para se ter um site organizado. A maneira mais f&aacute;cil de cri&aacute;-lo &eacute; usando regras de CSS num arquivo HTML. Voc&ecirc; pode cri&aacute;-lo a partir do <strong>Gerenciador de Arquivos<\/strong> no seu hPanel e inseri-lo no tema atual usando a fun&ccedil;&atilde;o PHP <strong>readfile()<\/strong>.<\/p><p class=\"wp-block-paragraph\">Incentivamos que voc&ecirc; experimente com essa funcionalidade!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A experi&ecirc;ncia do usu&aacute;rio e o tempo de carregamento do site s&atilde;o cr&iacute;ticos. &Eacute; por isso que voc&ecirc; n&atilde;o deve carregar seu site com JavaScript adicional ou imagens grandes. Mas o que fazer se voc&ecirc; quiser ter um bom olhar CSS dropdown menu? N&atilde;o h&aacute; necessidade de usar JavaScript para isso, hoje drop down efeito [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":6362,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Neste tutorial voc\u00ea aprender\u00e1 como \u00e9 simples criar um menu suspenso CSS. Hoje o efeito drop down pode ser criado usando apenas CSS.","rank_math_focus_keyword":"Menu suspenso","footnotes":""},"categories":[4901],"tags":[5159,5160,5158,5156,4812,5161,4795,4794,5157],"class_list":["post-4736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-animate-css","tag-background-css","tag-border-css","tag-cores-css","tag-css","tag-display-css","tag-drop-down","tag-menu","tag-position-css"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=4736"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4736\/revisions"}],"predecessor-version":[{"id":36419,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4736\/revisions\/36419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media\/6362"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=4736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=4736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=4736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}