{"id":36768,"date":"2020-12-23T15:53:56","date_gmt":"2020-12-23T13:53:56","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=36768"},"modified":"2020-12-23T16:01:48","modified_gmt":"2020-12-23T14:01:48","slug":"menu-desplegable-simple-estilos-css","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/","title":{"rendered":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS"},"content":{"rendered":"
<\/div>

\"C\u00f3mo<\/p>\n

Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html<\/strong><\/p>\n

En este tutorial indicaremos todos los pasos que se deben llevar a cabo para crear un men\u00fa desplegable simple con estilos CSS. \u00a1Empecemos!<\/p>\n

Creando un Men\u00fa Desplegable Simple con Estilos CSS<\/strong><\/h2>\n

Para crear un men\u00fa desplegable simple con estilos CSS solo necesitaremos usar el Administrador de Archivos<\/a> del Panel de Control del Alojamiento Web (en este caso cPanel) y seguir estos pasos:<\/p>\n

Paso 1. Crear un archivo HTML en blanco en la carpeta public_html<\/strong><\/h3>\n

Lo primero es lo primero, creamos un archivo .HTML en blanco<\/strong> para nuestro men\u00fa desplegable dentro del Administrador de Archivos<\/a>, dentro de la carpeta public_html<\/strong>.<\/p>\n

Para ello pulsamos el + Archivo (1)<\/strong> de la parte superior izquierda. En la nueva ventana escribimos \u201cmenu.html (2)\u201d<\/strong> y le damos a \u201cCreate new file (3)\u201d<\/strong>.<\/p>\n

\"Men\u00fa<\/p>\n

Ahora que hemos creado el archivo menu.html, es hora de genera la sintaxis del men\u00fa.<\/p>\n

Paso 2. A\u00f1adir C\u00f3digo de Men\u00fa HTML\u00a0<\/strong><\/h3>\n

Aqu\u00ed, crearemos un bot\u00f3n de men\u00fa simple que constar\u00e1 de un men\u00fa principal y cinco sub men\u00fas; pudiendo vincular cada sub men\u00fa a diferentes p\u00e1ginas de nuestro sitio web.\u00a0Pulsamos el bot\u00f3n derecho sobre el archivo menu.html y seleccionamos la tercera opci\u00f3n \u201cEdit\u201d<\/strong> (No confundir con la cuarta HTML Edit).<\/p>\n

\"Men\u00fa<\/p>\n

Y a\u00f1adimos la siguiente sintaxis:<\/p>\n

<html><\/p>\n

<head><\/p>\n

<\/head><\/p>\n

<body><\/p>\n

<div class=\u00bbdropdown\u00bb><\/p>\n

<button class=\u00bbmainmenubtn\u00bb>Menu Principal<\/button><\/p>\n

<div class=\u00bbdropdown-child\u00bb><\/p>\n

<a href=\u00bbhttp:\/\/www.tudominio.info\/pagina1.html\u00bb>Sub Menu 1<\/a><\/p>\n

<a href=\u00bbhttp:\/\/www.tudominio.info\/pagina2.html\u00bb>Sub Menu 2<\/a><\/p>\n

<a href=\u00bbhttp:\/\/www.tudominio.info\/pagina3.html\u00bb>Sub Menu 3<\/a><\/p>\n

<a href=\u00bbhttp:\/\/www.tudominio.info\/pagina4.html\u00bb>Sub Menu 4<\/a><\/p>\n

<a href=\u00bbhttp:\/\/www.tudominio.info\/pagina5.html\u00bb>Sub Menu 5<\/a><\/p>\n

<\/div><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p><\/blockquote>\n

\"Men\u00fa<\/p>\n

Como se puede comprobar hay una l\u00ednea por cada sub men\u00fa, por lo que si quisi\u00e9ramos a\u00f1adir m\u00e1s tendr\u00edamos que a\u00f1adir tantas l\u00edneas como m\u00e1s sub men\u00fas quisi\u00e9ramos<\/strong>.<\/p>\n

Lo importante es que las direcciones web pongamos las que correspondan a nuestra web en vez de www.tudominio.info\/paginax.html<\/em> que hemos puesto nosotros. Ya que al pinchar en esos sub men\u00fas s e nos redireccionar\u00e1 hacia las URL\u2019s que pongamos.<\/p>\n

Y as\u00ed es como quedar\u00eda el men\u00fa sin etilos CSS, ni si quiera ser\u00eda \u201cdesplegable\u201d:<\/strong><\/p>\n

\"Men\u00fa<\/p>\n

Paso 3. Aplicar Estilos CSS para Crear el Efecto \u201cDesplegable\u201d\u00a0<\/strong><\/h3>\n

Como hemos indicado antes, el men\u00fa solo con su correspondiente c\u00f3digo en HTML, pero NO ofrece el estilo \u00abDesplegable\u00bb<\/strong>. Para ello tendremos que redise\u00f1ar el c\u00f3digo HTML poniendo las siguientes reglas CSS en la parte superior del c\u00f3digo anterior<\/strong>, despu\u00e9s de la etiqueta <head>:<\/p>\n

<style>
\n.mainmenubtn {
\nbackground-color: skyblue;
\ncolor: white;
\nborder: none;
\ncursor: pointer;
\npadding:20px;
\nmargin-top:20px;
\n}
\n.mainmenubtn:hover {
\nbackground-color: blue;
\n}
\n.dropdown {
\nposition: relative;
\ndisplay: inline-block;
\n}
\n.dropdown-child {
\ndisplay: none;
\nbackground-color: skyblue;
\nmin-width: 200px;
\n}
\n.dropdown-child a {
\ncolor: blue;
\npadding: 20px;
\ntext-decoration: none;
\ndisplay: block;
\n}
\n.dropdown:hover .dropdown-child {
\ndisplay: block;
\n}
\n<\/style><\/p><\/blockquote>\n

Poniendo as\u00ed una parte del c\u00f3digo puede resultar confuso ya que el c\u00f3digo tiene que ir entre las etiquetas <head> y <\/head>. Como se puede comprobar abrimos unos estilos con <style> y <\/style> para hacer el efecto \u201cdesplegable\u201d.<\/p>\n

Mejor ponemos una imagen con todo el c\u00f3digo incluido para salir de dudas:<\/p>\n

\"Men\u00fa<\/p>\n

Por cierto, los par\u00e1metros que hemos introducir en los estilos son de ejemplo. Si lo deseas tu puedes experimentar con los paramentos cambiando colores y tama\u00f1os seg\u00fan las necesidades de tu men\u00fa.<\/strong><\/p>\n

Una vez que hayamos terminado de dise\u00f1ar nuestro men\u00fa, guardamos lo cambios en la parte superior derecha y listo<\/strong>. Este ser\u00eda el resultado (si pinchamos en Menu Principal se desplegar\u00edan los Sub Menus):<\/p>\n

\"Men\u00fa<\/p>\n

C\u00f3mo Poner el Men\u00fa Desplegable Simple con Estilos CSS en TU Theme<\/strong><\/h2>\n

Para mostrar el men\u00fa desplegable en tu theme tendr\u00e1s que hacer un llamamiento al archivo menu.html usando la funci\u00f3n readfile(‘menu.html’);<\/strong><\/p>\n

Lleva a cabo estos pasos en el Administrador de Archivos para conseguirlo:<\/p>\n

1. En la carpeta public_html, dir\u00edgete a wp_content -> Themes<\/strong>. Luego, accede a la carpeta del themes que utilizas actualmente.<\/p>\n

2. Ahora, abre el archivo header.php<\/strong> con la opci\u00f3n \u201cEdit\u201d<\/strong>, y pega la siguiente sintaxis en la parte inferior del archivo, justo debajo de la etiqueta <\/header>.<\/p>\n

<?php<\/p>\n

\/\/ do php stuff readfile(‘menu.html’);<\/p>\n

?><\/p><\/blockquote>\n

3. Por \u00faltimo, pulsa en Guardar Cambios<\/strong> en la parte superior derecha y listo.<\/p>\n

Vuelve a recargar tu sitio web y ver\u00e1s como el men\u00fa desplegable se aplica al mismo.<\/p>\n

Conclusi\u00f3n\u00a0<\/strong><\/h2>\n

Un men\u00fa desplegable simple con estilos CSS es esencial para mantener siempre bien ordenado nuestro sitio web. \u00a0<\/strong><\/p>\n

La forma m\u00e1s sencilla de crearlo es utilizando reglas CSS en un archivo HTML. Adem\u00e1s, desde el Administrador de archivos en su cPanel se puede hacer de forma muy sencilla, as\u00ed como despu\u00e9s ponerlo en el theme que estemos usando actualmente mediante la funci\u00f3n PHP readfile(‘menu.html’);<\/p>\n

Hosting WordPress SSD con LiteSpeed<\/strong><\/h2>\n

Ahora, en Hostinet puedes contratar un\u00a0Hosting WordPress SSD<\/strong>\u00a0con\u00a0LiteSpeed<\/a>\u00a0para incrementar el rendimiento de tu web hasta en un 300%.\u00a0\u00a1Te garantizamos una IP espa\u00f1ola, as\u00ed como el mejor soporte en tu idioma!\u00a0<\/strong><\/p>\n

En Hostinet trabajamos desde hace m\u00e1s de 15 a\u00f1os con servidores ubicados en Espa\u00f1a (Madrid y Bilbao) para ofrecer a nuestros clientes las mejores prestaciones posibles.<\/p>\n

\"Hosting<\/a><\/p>\n

<\/div> ","protected":false},"excerpt":{"rendered":"

Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html En este tutorial indicaremos todos los pasos que se deben llevar\u2026 <\/p>\n

\n

Sigue leyendo →<\/a><\/p>\n<\/div>\n","protected":false},"author":13,"featured_media":36779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[270,11],"tags":[],"class_list":["post-36768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-general"],"yoast_head":"\nC\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS<\/title>\n<meta name=\"description\" content=\"Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS\" \/>\n<meta property=\"og:description\" content=\"Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostinet\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-23T13:53:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-23T14:01:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2020\/12\/como-crear-menu-desplegable-simple-con-estilos-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"345\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Raul Alaman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Hostinet\" \/>\n<meta name=\"twitter:site\" content=\"@Hostinet\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raul Alaman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/\"},\"author\":{\"name\":\"Raul Alaman\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#\\\/schema\\\/person\\\/7f2d10131293f0f5f8e101ff5fc8bbff\"},\"headline\":\"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS\",\"datePublished\":\"2020-12-23T13:53:56+00:00\",\"dateModified\":\"2020-12-23T14:01:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/\"},\"wordCount\":1004,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/como-crear-menu-desplegable-simple-con-estilos-css.jpg\",\"articleSection\":[\"Dise\u00f1o Web\",\"General\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/\",\"url\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/\",\"name\":\"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/como-crear-menu-desplegable-simple-con-estilos-css.jpg\",\"datePublished\":\"2020-12-23T13:53:56+00:00\",\"dateModified\":\"2020-12-23T14:01:48+00:00\",\"description\":\"Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/como-crear-menu-desplegable-simple-con-estilos-css.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/como-crear-menu-desplegable-simple-con-estilos-css.jpg\",\"width\":600,\"height\":345,\"caption\":\"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/general\\\/menu-desplegable-simple-estilos-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o Web\",\"item\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/category\\\/diseno-web\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#website\",\"url\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/\",\"name\":\"Hostinet\",\"description\":\"Hosting y dominios en Espa\u00f1a. La mejor calidad a precios baratos\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#organization\"},\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#organization\",\"name\":\"Hostinet SLU\",\"url\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/hostinet-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/hostinet-logo.jpg\",\"width\":600,\"height\":245,\"caption\":\"Hostinet SLU\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/Hostinet\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/#\\\/schema\\\/person\\\/7f2d10131293f0f5f8e101ff5fc8bbff\",\"name\":\"Raul Alaman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48b5f4b2533ad76d51832beb49c1a8944cea60b3e968885696869b92ebf7d954?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48b5f4b2533ad76d51832beb49c1a8944cea60b3e968885696869b92ebf7d954?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48b5f4b2533ad76d51832beb49c1a8944cea60b3e968885696869b92ebf7d954?s=96&r=g\",\"caption\":\"Raul Alaman\"},\"sameAs\":[\"https:\\\/\\\/www.hostinet.com\\\/formacion\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS","description":"Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS","og_description":"Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html","og_url":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/","og_site_name":"Hostinet","article_published_time":"2020-12-23T13:53:56+00:00","article_modified_time":"2020-12-23T14:01:48+00:00","og_image":[{"width":600,"height":345,"url":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2020\/12\/como-crear-menu-desplegable-simple-con-estilos-css.jpg","type":"image\/jpeg"}],"author":"Raul Alaman","twitter_card":"summary_large_image","twitter_creator":"@Hostinet","twitter_site":"@Hostinet","twitter_misc":{"Escrito por":"Raul Alaman","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#article","isPartOf":{"@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/"},"author":{"name":"Raul Alaman","@id":"https:\/\/www.hostinet.com\/formacion\/#\/schema\/person\/7f2d10131293f0f5f8e101ff5fc8bbff"},"headline":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS","datePublished":"2020-12-23T13:53:56+00:00","dateModified":"2020-12-23T14:01:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/"},"wordCount":1004,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostinet.com\/formacion\/#organization"},"image":{"@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2020\/12\/como-crear-menu-desplegable-simple-con-estilos-css.jpg","articleSection":["Dise\u00f1o Web","General"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/","url":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/","name":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS","isPartOf":{"@id":"https:\/\/www.hostinet.com\/formacion\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2020\/12\/como-crear-menu-desplegable-simple-con-estilos-css.jpg","datePublished":"2020-12-23T13:53:56+00:00","dateModified":"2020-12-23T14:01:48+00:00","description":"Un men\u00fa desplegable simple puede resultar de gran utilidad cuando se desea tener organizadas p\u00e1ginas o secciones dentro de un mismo website. El efecto \u201cdesplegable\u201d se puede conseguir facialmente usando estilos CSS dentro del c\u00f3digo de un archivo .html","breadcrumb":{"@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#primaryimage","url":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2020\/12\/como-crear-menu-desplegable-simple-con-estilos-css.jpg","contentUrl":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2020\/12\/como-crear-menu-desplegable-simple-con-estilos-css.jpg","width":600,"height":345,"caption":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostinet.com\/formacion\/general\/menu-desplegable-simple-estilos-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.hostinet.com\/formacion\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o Web","item":"https:\/\/www.hostinet.com\/formacion\/category\/diseno-web\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Crear un Men\u00fa Desplegable Simple con Estilos CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hostinet.com\/formacion\/#website","url":"https:\/\/www.hostinet.com\/formacion\/","name":"Hostinet","description":"Hosting y dominios en Espa\u00f1a. La mejor calidad a precios baratos","publisher":{"@id":"https:\/\/www.hostinet.com\/formacion\/#organization"},"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.hostinet.com\/formacion\/#organization","name":"Hostinet SLU","url":"https:\/\/www.hostinet.com\/formacion\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.hostinet.com\/formacion\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2016\/06\/hostinet-logo.jpg","contentUrl":"https:\/\/www.hostinet.com\/formacion\/wp-content\/uploads\/2016\/06\/hostinet-logo.jpg","width":600,"height":245,"caption":"Hostinet SLU"},"image":{"@id":"https:\/\/www.hostinet.com\/formacion\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/Hostinet"]},{"@type":"Person","@id":"https:\/\/www.hostinet.com\/formacion\/#\/schema\/person\/7f2d10131293f0f5f8e101ff5fc8bbff","name":"Raul Alaman","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/48b5f4b2533ad76d51832beb49c1a8944cea60b3e968885696869b92ebf7d954?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/48b5f4b2533ad76d51832beb49c1a8944cea60b3e968885696869b92ebf7d954?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48b5f4b2533ad76d51832beb49c1a8944cea60b3e968885696869b92ebf7d954?s=96&r=g","caption":"Raul Alaman"},"sameAs":["https:\/\/www.hostinet.com\/formacion\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/posts\/36768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/comments?post=36768"}],"version-history":[{"count":3,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/posts\/36768\/revisions"}],"predecessor-version":[{"id":36780,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/posts\/36768\/revisions\/36780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/media\/36779"}],"wp:attachment":[{"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/media?parent=36768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/categories?post=36768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinet.com\/formacion\/wp-json\/wp\/v2\/tags?post=36768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}