{"id":87,"date":"2012-05-29T00:54:32","date_gmt":"2012-05-29T00:54:32","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=87"},"modified":"2016-03-29T02:03:36","modified_gmt":"2016-03-29T02:03:36","slug":"css-dropdown-navigation-menu-2","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/","title":{"rendered":"CSS Dropdown Navigation Menu (part 2)"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/sAg3Pocufx8?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In this CSS tutorial we take a look at styling dropdown menus, and also how we can use JavaScript to add support for our menu in older versions of Internet Explorer.<\/p>\n<ul>\n<li><a href=\"https:\/\/learnwebcode.com\/tutorial-files\/css-dropdown-navigation-tutorial\/\">View Live Demo<\/a><\/li>\n<li><a href=\"https:\/\/learnwebcode.com\/tutorial-files\/css-dropdown-navigation-tutorial\/css-dropdown-navigation.zip\">Link to download files used in this tutorial (.zip file)<\/a><\/li>\n<\/ul>\n<p>If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out <a href=\"\/web-design-for-beginners-real-world-coding-html-css\/\">my updated 8 hour video course<\/a> and learn pro-level HTML, CSS, and responsive design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this CSS tutorial we take a look at styling dropdown menus, and also how we can use JavaScript to add support for our menu in older versions of Internet Explorer. View Live Demo Link to download files used in this tutorial (.zip file) If you would rather learn from a single, unified video course [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-87","post","type-post","status-publish","format-standard","hentry","category-css-video-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Dropdown Navigation Menu (part 2) - LearnWebCode<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Dropdown Navigation Menu (part 2) - LearnWebCode\" \/>\n<meta property=\"og:description\" content=\"In this CSS tutorial we take a look at styling dropdown menus, and also how we can use JavaScript to add support for our menu in older versions of Internet Explorer. View Live Demo Link to download files used in this tutorial (.zip file) If you would rather learn from a single, unified video course [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnWebCode\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-29T00:54:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-29T02:03:36+00:00\" \/>\n<meta name=\"author\" content=\"Brad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\"},\"author\":{\"name\":\"Brad\",\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"headline\":\"CSS Dropdown Navigation Menu (part 2)\",\"datePublished\":\"2012-05-29T00:54:32+00:00\",\"dateModified\":\"2016-03-29T02:03:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\"},\"wordCount\":81,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"articleSection\":[\"CSS Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\",\"url\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\",\"name\":\"CSS Dropdown Navigation Menu (part 2) - LearnWebCode\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/#website\"},\"datePublished\":\"2012-05-29T00:54:32+00:00\",\"dateModified\":\"2016-03-29T02:03:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnwebcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Dropdown Navigation Menu (part 2)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnwebcode.com\/#website\",\"url\":\"https:\/\/learnwebcode.com\/\",\"name\":\"LearnWebCode\",\"description\":\"Become a Web Developer\",\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnwebcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\",\"name\":\"Brad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"url\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"contentUrl\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"width\":400,\"height\":400,\"caption\":\"Brad\"},\"logo\":{\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\"},\"url\":\"https:\/\/learnwebcode.com\/author\/lwcadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Dropdown Navigation Menu (part 2) - LearnWebCode","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:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/","og_locale":"en_US","og_type":"article","og_title":"CSS Dropdown Navigation Menu (part 2) - LearnWebCode","og_description":"In this CSS tutorial we take a look at styling dropdown menus, and also how we can use JavaScript to add support for our menu in older versions of Internet Explorer. View Live Demo Link to download files used in this tutorial (.zip file) If you would rather learn from a single, unified video course [&hellip;]","og_url":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/","og_site_name":"LearnWebCode","article_published_time":"2012-05-29T00:54:32+00:00","article_modified_time":"2016-03-29T02:03:36+00:00","author":"Brad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brad"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#article","isPartOf":{"@id":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/"},"author":{"name":"Brad","@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"headline":"CSS Dropdown Navigation Menu (part 2)","datePublished":"2012-05-29T00:54:32+00:00","dateModified":"2016-03-29T02:03:36+00:00","mainEntityOfPage":{"@id":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/"},"wordCount":81,"commentCount":2,"publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"articleSection":["CSS Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/","url":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/","name":"CSS Dropdown Navigation Menu (part 2) - LearnWebCode","isPartOf":{"@id":"https:\/\/learnwebcode.com\/#website"},"datePublished":"2012-05-29T00:54:32+00:00","dateModified":"2016-03-29T02:03:36+00:00","breadcrumb":{"@id":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learnwebcode.com\/css-dropdown-navigation-menu-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnwebcode.com\/"},{"@type":"ListItem","position":2,"name":"CSS Dropdown Navigation Menu (part 2)"}]},{"@type":"WebSite","@id":"https:\/\/learnwebcode.com\/#website","url":"https:\/\/learnwebcode.com\/","name":"LearnWebCode","description":"Become a Web Developer","publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnwebcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6","name":"Brad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","url":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","contentUrl":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","width":400,"height":400,"caption":"Brad"},"logo":{"@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg"},"url":"https:\/\/learnwebcode.com\/author\/lwcadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":12,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/87\/revisions\/1031"}],"wp:attachment":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}