{"id":2086,"date":"2014-12-28T08:49:23","date_gmt":"2014-12-28T08:49:23","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2086"},"modified":"2014-12-28T08:49:23","modified_gmt":"2014-12-28T08:49:23","slug":"show-hide-dropdown-menu-on-mouse-hover-using-only-css","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/","title":{"rendered":"Show hide dropdown menu on mouse hover using only CSS"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.vishmax.com\/en\/innovattive-cms\/uploads\/2014\/12\/dropdown-menu-blue.jpg\" alt=\"dropdown-menu-blue\" width=\"600\" height=\"364\" class=\"alignnone size-full wp-image-2087\" srcset=\"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/dropdown-menu-blue.jpg 600w, http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/dropdown-menu-blue-379x230.jpg 379w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\nHere is &#8216;Blue Menu&#8217; which is built only using Cascading Style Sheets (CSS). As it uses CSS display property and :hover so you don&#8217;t need any JavaScript. Not only simple it is also search engine friendly. At end to this post there is options for viewing live demo and download the source file as zip format. Make necessary changes and use it on next project! <\/p>\n<h2>How to make dropdown menu using CSS<\/h2>\n<p>Below is the code which is used to build &#8216;Blue Menu&#8217;. For understanding more easy the codes are divided and displayed in two parts, CSS and HTML respectively. <\/p>\n<h3>CSS<\/h3>\n<pre lang=\"css\">\r\n\t.navigation ul {\r\n\t\ttext-align: left;\r\n\t\tdisplay: inline;\r\n\t\tmargin: 0;\r\n\t\tlist-style: none;\r\n\t}\r\n\t.navigation ul li {\r\n\t\tfont-size:18px;\r\n\t\tfont-weight:300;\r\n\t\tdisplay: inline-block;\r\n\t\tmargin-right: -4px;\r\n\t\tposition: relative;\r\n\t\tpadding: 15px 20px;\r\n\t\tbackground: #57a4d8;\r\n\t\tcolor:#fff;\r\n\t\tcursor: pointer;\r\n\t}\r\n\t.navigation ul li:hover {\r\n\t\tbackground: #57a4d8;\r\n\t\tcolor: #fff;\r\n\t}\r\n\t.navigation ul li ul {\r\n\t\tpadding: 0;\r\n\t\tposition: absolute;\r\n\t\ttop: 62px;\r\n\t\tleft: 0;\r\n\t\twidth: 250px;\r\n\t\tdisplay: none;\r\n\t\topacity: 0;\r\n\t\tvisibility: hidden;\r\n\t}\r\n\t.navigation ul li ul li { \r\n\t\tbackground: #57a4d8; \r\n\t\tdisplay: block; \r\n\t\tcolor: #fff;\r\n\t\tborder-bottom:1px solid #4589b8;\r\n\t}\r\n\t.navigation ul li ul li:hover { background: #3a8dc9; }\r\n\t.navigation ul li:hover ul {\r\n\t\tdisplay: block;\r\n\t\topacity: 1;\r\n\t\tvisibility: visible;\r\n\t}\r\n\r\n<\/pre>\n<h3>HTML<\/h3>\n<pre lang=\"html\">\r\n\r\n\t\t<!-- Dropdown -->\r\n\t\t<div class=\"navigation\">\r\n\t\t\t<ul>\r\n\t\t\t\t<li>Menu 1<\/li>\r\n\t\t\t\t<li>Menu 2<\/li>\r\n\t\t\t\t<li>\r\n\t\t\t\tDrop Menu1 &#9662;\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t<li>Sub Menu 1<\/li>\r\n\t\t\t\t\t<li>Sub Menu 2<\/li>\r\n\t\t\t\t\t<li>Sub Menu 3<\/li>\r\n\t\t\t\t\t<li>Sub Menu 4<\/li>\r\n\t\t\t\t\t<li>Sub Menu 5<\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li>\r\n\t\t\t\tDrop Menu 2 &#9662;\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t<li>Sub Menu 1<\/li>\r\n\t\t\t\t\t<li>Sub Menu 2<\/li>\r\n\t\t\t\t\t<li>Sub Menu 3<\/li>\r\n\t\t\t\t\t<li>Sub Menu 4<\/li>\r\n\t\t\t\t\t<li>Sub Menu 5<\/li>\r\n\t\t\t\t\t<li>Sub Menu 6<\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li> \r\n\t\t\t\t<li>\r\n\t\t\t\tDrop Menu 3 &#9662;\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t<li>Sub Menu 1<\/li>\r\n\t\t\t\t\t<li>Sub Menu 2<\/li>\r\n\t\t\t\t\t<li>Sub Menu 3<\/li>\r\n\t\t\t\t\t<li>Sub Menu 4<\/li>\r\n\t\t\t\t\t<li>Sub Menu 5<\/li>\r\n\t\t\t\t\t<li>Sub Menu 6<\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li> \r\n\t\t\t\t<li>\r\n\t\t\t\tDrop Menu 4 &#9662;\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t<li>Sub Menu 1<\/li>\r\n\t\t\t\t\t<li>Sub Menu 2<\/li>\r\n\t\t\t\t\t<li>Sub Menu 3<\/li>\r\n\t\t\t\t\t<li>Sub Menu 4<\/li>\r\n\t\t\t\t\t<li>Sub Menu 5<\/li>\r\n\t\t\t\t\t<li>Sub Menu 6<\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li> \r\n\t\t\t\t<li>Menu 5<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\t\t<!-- End of Dropdown -->\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/dropdown-menu-blue-menu.html\" target=\"_blank\">Live Demo<\/a> <a class=\"zip--download\" href=\"http:\/\/vishmax.com\/demos\/dropdown-menu-blue-menu.zip\" target=\"_blank\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is &#8216;Blue Menu&#8217; which is built only using Cascading Style Sheets (CSS). As it uses CSS display property and :hover so you don&#8217;t need any JavaScript. Not only simple it is also search engine friendly. At end to this post there is options for viewing live demo and download the source file as zip [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2088,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[67,101,96,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Show hide dropdown menu on mouse hover using only CSS - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Show hide dropdown menu on mouse hover using only CSS - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is &#8216;Blue Menu&#8217; which is built only using Cascading Style Sheets (CSS). As it uses CSS display property and :hover so you don&#8217;t need any JavaScript. Not only simple it is also search engine friendly. At end to this post there is options for viewing live demo and download the source file as zip [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-28T08:49:23+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/css-menu-blue400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"Show hide dropdown menu on mouse hover using only CSS\",\"datePublished\":\"2014-12-28T08:49:23+00:00\",\"dateModified\":\"2014-12-28T08:49:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\"},\"wordCount\":116,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Freebies\",\"Web Design Tips\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\",\"name\":\"Show hide dropdown menu on mouse hover using only CSS - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-28T08:49:23+00:00\",\"dateModified\":\"2014-12-28T08:49:23+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Show hide dropdown menu on mouse hover using only CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"http:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Show hide dropdown menu on mouse hover using only CSS - Vishmax.com","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":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/","og_locale":"en_US","og_type":"article","og_title":"Show hide dropdown menu on mouse hover using only CSS - Vishmax.com","og_description":"Here is &#8216;Blue Menu&#8217; which is built only using Cascading Style Sheets (CSS). As it uses CSS display property and :hover so you don&#8217;t need any JavaScript. Not only simple it is also search engine friendly. At end to this post there is options for viewing live demo and download the source file as zip [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-28T08:49:23+00:00","og_image":[{"width":400,"height":230,"url":"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/css-menu-blue400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"Show hide dropdown menu on mouse hover using only CSS","datePublished":"2014-12-28T08:49:23+00:00","dateModified":"2014-12-28T08:49:23+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/"},"wordCount":116,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Freebies","Web Design Tips"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/","url":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/","name":"Show hide dropdown menu on mouse hover using only CSS - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-28T08:49:23+00:00","dateModified":"2014-12-28T08:49:23+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/blog\/show-hide-dropdown-menu-on-mouse-hover-using-only-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"Show hide dropdown menu on mouse hover using only CSS"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"http:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2086"}],"collection":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2086"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2088"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2086"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}