{"id":711,"date":"2020-07-03T22:07:15","date_gmt":"2020-07-04T01:07:15","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=711"},"modified":"2022-12-09T08:24:01","modified_gmt":"2022-12-09T11:24:01","slug":"dropdowns-de-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/dropdowns-de-css\/","title":{"rendered":"Dropdowns de CSS"},"content":{"rendered":"

Crie um menu suspenso pair\u00e1vel com CSS. Crie um menu suspenso que permita ao usu\u00e1rio escolher uma op\u00e7\u00e3o em uma lista:<\/p>\n

\"\"<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.dropbtn {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n  padding: 16px;\r\n  font-size: 16px;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.dropdown {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.dropdown-content {\r\n  display: none;\r\n  position: absolute;\r\n  background-color: #f9f9f9;\r\n  min-width: 160px;\r\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\r\n  z-index: 1;\r\n}\r\n\r\n.dropdown-content a {\r\n  color: black;\r\n  padding: 12px 16px;\r\n  text-decoration: none;\r\n  display: block;\r\n}\r\n\r\n.dropdown-content a:hover {background-color: #f1f1f1}\r\n\r\n.dropdown:hover .dropdown-content {\r\n  display: block;\r\n}\r\n\r\n.dropdown:hover .dropbtn {\r\n  background-color: #3e8e41;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Dropdown Menu<\/h2>\r\n<p>Move the mouse over the button to open the dropdown menu.<\/p>\r\n\r\n<div class=\"dropdown\">\r\n  <button class=\"dropbtn\">Dropdown<\/button>\r\n  <div class=\"dropdown-content\">\r\n  <a href=\"#\">Link 1<\/a>\r\n  <a href=\"#\">Link 2<\/a>\r\n  <a href=\"#\">Link 3<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<p><strong>Note:<\/strong> We use href=\"#\" for test links. In a real web site this would be URLs.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Outros efeitos que \u00e9 poss\u00edvel fazer<\/p>\n
 <\/p>\n
Com imagens:<\/p>\n
 <\/p>\n
\"\"<\/p>\n
Menus:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Textos:<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Efeitos em barras de navega\u00e7\u00e3o<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a, .dropbtn {\r\n  display: inline-block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover, .dropdown:hover .dropbtn {\r\n  background-color: red;\r\n}\r\n\r\nli.dropdown {\r\n  display: inline-block;\r\n}\r\n\r\n.dropdown-content {\r\n  display: none;\r\n  position: absolute;\r\n  background-color: #f9f9f9;\r\n  min-width: 160px;\r\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\r\n  z-index: 1;\r\n}\r\n\r\n.dropdown-content a {\r\n  color: black;\r\n  padding: 12px 16px;\r\n  text-decoration: none;\r\n  display: block;\r\n  text-align: left;\r\n}\r\n\r\n.dropdown-content a:hover {background-color: #f1f1f1;}\r\n\r\n.dropdown:hover .dropdown-content {\r\n  display: block;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li class=\"dropdown\">\r\n    <a href=\"javascript:void(0)\" class=\"dropbtn\">Dropdown<\/a>\r\n    <div class=\"dropdown-content\">\r\n      <a href=\"#\">Link 1<\/a>\r\n      <a href=\"#\">Link 2<\/a>\r\n      <a href=\"#\">Link 3<\/a>\r\n    <\/div>\r\n  <\/li>\r\n<\/ul>\r\n\r\n<h3>Dropdown Menu inside a Navigation Bar<\/h3>\r\n<p>Hover over the \"Dropdown\" link to see the dropdown menu.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n