![\"\"](\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png\" "\\"menu-dropdown\\"")
<\/a>Para conseguir este efecto tan interesante deberemos crear nuestro men\u00fa como sueles hacerlo en HTML dentro del <body> de la p\u00e1gina:<\/p>\n<ul id=\"menu\">\r\n\u00a0\u00a0 \u00a0<li><a href=\"#\">Home<\/a><\/li>\r\n\u00a0\u00a0 \u00a0<li>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<a href=\"#\">Categories<\/a>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<ul>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<li><a href=\"#\">CSS<\/a><\/li>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<li><a href=\"#\">Graphic design<\/a><\/li>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<li><a href=\"#\">Development tools<\/a><\/li>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<li><a href=\"#\">Web design<\/a><\/li>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/ul>\r\n\u00a0\u00a0 \u00a0<\/li>\r\n\u00a0\u00a0 \u00a0<li><a href=\"#\">Work<\/a><\/li>\r\n\u00a0\u00a0 \u00a0<li><a href=\"#\">About<\/a><\/li>\r\n\u00a0\u00a0 \u00a0<li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul><\/pre>\nY luego los estilos necesarios:<\/p>\n
#menu{\r\n\u00a0\u00a0 \u00a0width: 100%;\r\n\u00a0\u00a0 \u00a0margin: 0;\r\n\u00a0\u00a0 \u00a0padding: 10px 0 0 0;\r\n\u00a0\u00a0 \u00a0list-style: none; \u00a0\r\n\u00a0\u00a0 \u00a0background: #111;\r\n\u00a0\u00a0 \u00a0background: -moz-linear-gradient(#444, #111); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0background: -webkit-linear-gradient(#444, #111);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0background: -o-linear-gradient(#444, #111);\r\n\u00a0\u00a0 \u00a0background: -ms-linear-gradient(#444, #111);\r\n\u00a0\u00a0 \u00a0background: linear-gradient(#444, #111);\r\n\u00a0\u00a0 \u00a0-moz-border-radius: 50px;\r\n\u00a0\u00a0 \u00a0border-radius: 50px;\r\n\u00a0\u00a0 \u00a0-moz-box-shadow: 0 2px 1px #9c9c9c;\r\n\u00a0\u00a0 \u00a0-webkit-box-shadow: 0 2px 1px #9c9c9c;\r\n\u00a0\u00a0 \u00a0box-shadow: 0 2px 1px #9c9c9c;\r\n}\r\n\r\n#menu li{\r\n\u00a0\u00a0 \u00a0float: left;\r\n\u00a0\u00a0 \u00a0padding: 0 0 10px 0;\r\n\u00a0\u00a0 \u00a0position: relative;\r\n}\r\n\r\n#menu a{\r\n\u00a0\u00a0 \u00a0float: left;\r\n\u00a0\u00a0 \u00a0height: 25px;\r\n\u00a0\u00a0 \u00a0padding: 0 25px;\r\n\u00a0\u00a0 \u00a0color: #999;\r\n\u00a0\u00a0 \u00a0text-transform: uppercase;\r\n\u00a0\u00a0 \u00a0font: bold 12px\/25px Arial, Helvetica;\r\n\u00a0\u00a0 \u00a0text-decoration: none;\r\n\u00a0\u00a0 \u00a0text-shadow: 0 1px 0 #000;\r\n}\r\n\r\n#menu li:hover > a{\r\n\u00a0\u00a0 \u00a0color: #fafafa;\r\n}\r\n\r\n*html #menu li a:hover{ \/* IE6 *\/\r\n\u00a0\u00a0 \u00a0color: #fafafa;\r\n}\r\n\r\n#menu li:hover > ul{\r\n\u00a0\u00a0 \u00a0display: block;\r\n}\r\n\r\n\/* Sub-menu *\/\r\n\r\n#menu ul{\r\n\u00a0\u00a0\u00a0 list-style: none;\r\n\u00a0\u00a0\u00a0 margin: 0;\r\n\u00a0\u00a0\u00a0 padding: 0;\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 display: none;\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 top: 35px;\r\n\u00a0\u00a0\u00a0 left: 0;\r\n\u00a0\u00a0\u00a0 z-index: 99999;\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 background: #444;\r\n\u00a0\u00a0\u00a0 background: -moz-linear-gradient(#444, #111);\r\n\u00a0\u00a0\u00a0 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));\r\n\u00a0\u00a0\u00a0 background: -webkit-linear-gradient(#444, #111);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 background: -o-linear-gradient(#444, #111);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 background: -ms-linear-gradient(#444, #111);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 background: linear-gradient(#444, #111);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 -moz-border-radius: 5px;\r\n\u00a0\u00a0\u00a0 border-radius: 5px;\r\n}\r\n\r\n#menu ul li{\r\n\u00a0\u00a0\u00a0 float: none;\r\n\u00a0\u00a0\u00a0 margin: 0;\r\n\u00a0\u00a0\u00a0 padding: 0;\r\n\u00a0\u00a0\u00a0 display: block; \u00a0\r\n\u00a0\u00a0\u00a0 -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;\r\n\u00a0\u00a0\u00a0 -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;\r\n\u00a0\u00a0\u00a0 box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;\r\n}\r\n\r\n#menu ul li:last-child{\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 -moz-box-shadow: none;\r\n\u00a0\u00a0\u00a0 -webkit-box-shadow: none;\r\n\u00a0\u00a0\u00a0 box-shadow: none;\u00a0\u00a0 \u00a0\r\n}\r\n\r\n#menu ul a{\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 padding: 10px;\r\n\u00a0\u00a0\u00a0 height: auto;\r\n\u00a0\u00a0\u00a0 line-height: 1;\r\n\u00a0\u00a0\u00a0 display: block;\r\n\u00a0\u00a0\u00a0 white-space: nowrap;\r\n\u00a0\u00a0\u00a0 float: none;\r\n\u00a0\u00a0\u00a0 text-transform: none;\r\n}\r\n\r\n*html #menu ul a{ \/* IE6 *\/\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0height: 10px;\r\n\u00a0\u00a0 \u00a0width: 150px;\r\n}\r\n\r\n*:first-child+html #menu ul a{ \/* IE7 *\/\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0height: 10px;\r\n\u00a0\u00a0 \u00a0width: 150px;\r\n}\r\n\r\n#menu ul a:hover{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: #0186ba;\r\n\u00a0\u00a0 \u00a0background: -moz-linear-gradient(#04acec,\u00a0 #0186ba);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));\r\n\u00a0\u00a0 \u00a0background: -webkit-linear-gradient(#04acec,\u00a0 #0186ba);\r\n\u00a0\u00a0 \u00a0background: -o-linear-gradient(#04acec,\u00a0 #0186ba);\r\n\u00a0\u00a0 \u00a0background: -ms-linear-gradient(#04acec,\u00a0 #0186ba);\r\n\u00a0\u00a0 \u00a0background: linear-gradient(#04acec,\u00a0 #0186ba);\r\n}\r\n\r\n#menu ul li:first-child a{\r\n\u00a0\u00a0\u00a0 -moz-border-radius: 5px 5px 0 0;\r\n\u00a0\u00a0\u00a0 -webkit-border-radius: 5px 5px 0 0;\r\n\u00a0\u00a0\u00a0 border-radius: 5px 5px 0 0;\r\n}\r\n\r\n#menu ul li:first-child a:after{\r\n\u00a0\u00a0\u00a0 content: '';\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 left: 30px;\r\n\u00a0\u00a0\u00a0 top: -8px;\r\n\u00a0\u00a0\u00a0 width: 0;\r\n\u00a0\u00a0\u00a0 height: 0;\r\n\u00a0\u00a0\u00a0 border-left: 5px solid transparent;\r\n\u00a0\u00a0\u00a0 border-right: 5px solid transparent;\r\n\u00a0\u00a0\u00a0 border-bottom: 8px solid #444;\r\n}\r\n\r\n#menu ul li:first-child a:hover:after{\r\n\u00a0\u00a0\u00a0 border-bottom-color: #04acec; \r\n}\r\n\r\n#menu ul li:last-child a{\r\n\u00a0\u00a0\u00a0 -moz-border-radius: 0 0 5px 5px;\r\n\u00a0\u00a0\u00a0 -webkit-border-radius: 0 0 5px 5px;\r\n\u00a0\u00a0\u00a0 border-radius: 0 0 5px 5px;\r\n}\r\n\r\n\/* Clear floated elements *\/\r\n#menu:after{\r\n\u00a0\u00a0 \u00a0visibility: hidden;\r\n\u00a0\u00a0 \u00a0display: block;\r\n\u00a0\u00a0 \u00a0font-size: 0;\r\n\u00a0\u00a0 \u00a0content: \" \";\r\n\u00a0\u00a0 \u00a0clear: both;\r\n\u00a0\u00a0 \u00a0height: 0;\r\n}\r\n\r\n* html #menu\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { zoom: 1; } \/* IE6 *\/\r\n*:first-child+html #menu { zoom: 1; } \/* IE7 *\/\r\n\r\n#menu ul li:first-child a:after{\r\n\u00a0\u00a0\u00a0 content: '';\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 left: 30px;\r\n\u00a0\u00a0\u00a0 top: -8px;\r\n\u00a0\u00a0\u00a0 width: 0;\r\n\u00a0\u00a0\u00a0 height: 0;\r\n\u00a0\u00a0\u00a0 border-left: 5px solid transparent;\r\n\u00a0\u00a0\u00a0 border-right: 5px solid transparent;\r\n\u00a0\u00a0\u00a0 border-bottom: 8px solid #444;\r\n}\r\n\r\n#menu ul li:first-child a:hover:after{\r\n\u00a0\u00a0\u00a0 border-bottom-color: #04acec; \r\n}<\/pre>\nEditarlo es bastante sencillo, tan solo te tienes que fijar un poco en los estilos para entenderlo y modificarlo al gusto.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"En este art\u00edculo vamos a aprender como crear un men\u00fa desplegable elegante emplenando CSS3, sin necesidad de utilizar javascript. Para conseguir este efecto tan interesante deberemos crear nuestro men\u00fa como sueles hacerlo en HTML dentro del <body> de la p\u00e1gina: <ul id=\u00bbmenu\u00bb> \u00a0\u00a0 \u00a0<li><a href=\u00bb#\u00bb>Home<\/a><\/li> \u00a0\u00a0 \u00a0<li> \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<a href=\u00bb#\u00bb>Categories<\/a> \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<ul> \u00a0\u00a0 […]<\/p>\n","protected":false},"author":1,"featured_media":3150,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[44],"class_list":["post-3149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-menus"],"yoast_head":"\n
Dropdown Men\u00fa con CSS3 - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dropdown Men\u00fa con CSS3 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a aprender como crear un men\u00fa desplegable elegante emplenando CSS3, sin necesidad de utilizar javascript. Para conseguir este efecto tan interesante deberemos crear nuestro men\u00fa como sueles hacerlo en HTML dentro del <body> de la p\u00e1gina: <ul id="menu"> \u00a0\u00a0 \u00a0<li><a href="#">Home<\/a><\/li> \u00a0\u00a0 \u00a0<li> \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<a href="#">Categories<\/a> \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<ul> \u00a0\u00a0 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-29T23:19:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:17:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png\" \/>\n\t<meta property=\"og:image:width\" content=\"508\" \/>\n\t<meta property=\"og:image:height\" content=\"209\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/\",\"name\":\"Dropdown Men\u00fa con CSS3 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png\",\"datePublished\":\"2012-06-29T23:19:13+00:00\",\"dateModified\":\"2019-03-02T09:17:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png\",\"width\":508,\"height\":209},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dropdown Men\u00fa con CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dropdown Men\u00fa con CSS3 - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Dropdown Men\u00fa con CSS3 - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a aprender como crear un men\u00fa desplegable elegante emplenando CSS3, sin necesidad de utilizar javascript. Para conseguir este efecto tan interesante deberemos crear nuestro men\u00fa como sueles hacerlo en HTML dentro del <body> de la p\u00e1gina: <ul id=\"menu\"> \u00a0\u00a0 \u00a0<li><a href=\"#\">Home<\/a><\/li> \u00a0\u00a0 \u00a0<li> \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<a href=\"#\">Categories<\/a> \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<ul> \u00a0\u00a0 […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-06-29T23:19:13+00:00","article_modified_time":"2019-03-02T09:17:39+00:00","og_image":[{"width":508,"height":209,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/","url":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/","name":"Dropdown Men\u00fa con CSS3 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png","datePublished":"2012-06-29T23:19:13+00:00","dateModified":"2019-03-02T09:17:39+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/menu-dropdown.png","width":508,"height":209},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/dropdown-menu-con-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dropdown Men\u00fa con CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3149"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3149\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3150"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}