{"id":1832,"date":"2014-12-18T10:59:30","date_gmt":"2014-12-18T10:59:30","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=1832"},"modified":"2014-12-27T12:54:08","modified_gmt":"2014-12-27T12:54:08","slug":"css-dropdown-menu-with-example","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/","title":{"rendered":"CSS dropdown menu with example"},"content":{"rendered":"<p>Here is a simple css drop down menu which can be useful in web design projects. You can view the working example and also find the source code used in demo. Hope it will be helpful for web designers. <\/p>\n<h2>HTML Part<\/h2>\n<pre lang=\"php\">\r\n\r\n\t\t<nav class=\"clearfix\" role=\"navigation\">\r\n\t\t\t<ul><li>Home<\/li>\r\n\t\t\t  <li>About us<\/li>\r\n\t\t\t  <li>\r\n\t\t\t\tServices\r\n\t\t\t\t<ul>\r\n\t\t\t\t  <li>Web Design<\/li>\r\n\t\t\t\t  <li>Web Development<\/li>\r\n\t\t\t\t  <li>WordPress Development<\/li>\r\n\t\t\t\t<\/ul>\r\n\t\t\t  <\/li>\r\n\t\t\t  <li>\r\n\t\t\t\tProducts\r\n\t\t\t\t<ul>\r\n\t\t\t\t  <li>Web CRM Software<\/li>\r\n\t\t\t\t  <li>Email Marketing Software<\/li>\r\n\t\t\t\t  <li>Portal Software<\/li>\r\n\t\t\t\t  <li>Premium WordPress Themes<\/li>\r\n\t\t\t\t<\/ul>\r\n\t\t\t  <\/li> \r\n\t\t\t  <li>Blog<\/li>\r\n\t\t\t  <li>Contact Us<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/nav>\r\n\r\n\r\n<\/pre>\n<h2>CSS Part<\/h2>\n<pre lang=\"css\">\r\n\r\nnav{\r\n\tfloat:right;\r\n\twidth:60%;\r\n}\r\nul {\r\n\ttext-align: left;\r\n\tdisplay: inline;\r\n\tmargin: 0;\r\n\tpadding: 15px 4px 17px 0;\r\n\tlist-style: none;\r\n}\r\nul li {\r\n\tfont-size:18px;\r\n\tfont-weight:300;\r\n\tdisplay: inline-block;\r\n\tmargin-right: -4px;\r\n\tposition: relative;\r\n\tpadding: 15px 20px;\r\n\tbackground: #fff;\r\n\tcursor: pointer;\r\n}\r\nul li:hover {\r\n\tbackground: #555;\r\n\tcolor: #fff;\r\n}\r\nul li ul {\r\n\tpadding: 0;\r\n\tposition: absolute;\r\n\ttop: 48px;\r\n\tleft: 0;\r\n\twidth: 250px;\r\n\tdisplay: none;\r\n\topacity: 0;\r\n\tvisibility: hidden;\r\n}\r\nul li ul li { \r\n\tbackground: #555; \r\n\tdisplay: block; \r\n\tcolor: #fff;\r\n\tborder-bottom:1px solid #666;\r\n}\r\nul li ul li:hover { background: #666; }\r\nul li:hover ul {\r\n\tdisplay: block;\r\n\topacity: 1;\r\n\tvisibility: visible;\r\n}\r\n\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/www.vishmax.com\/demos\/dropdown-menu.html\" target=\"_blank\">Demo<\/a> <a class=\"external-download\" href=\"http:\/\/www.vishmax.com\/demos\/dropdown-menu.zip\" target=\"_blank\">Download<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a simple css drop down menu which can be useful in web design projects. You can view the working example and also find the source code used in demo. Hope it will be helpful for web designers. HTML Part Home About us Services Web Design Web Development WordPress Development Products Web CRM Software [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[72,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>CSS dropdown menu with example - 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\/labs\/css-dropdown-menu-with-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS dropdown menu with example - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is a simple css drop down menu which can be useful in web design projects. You can view the working example and also find the source code used in demo. Hope it will be helpful for web designers. HTML Part Home About us Services Web Design Web Development WordPress Development Products Web CRM Software [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-18T10:59:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-27T12:54:08+00:00\" \/>\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\/labs\/css-dropdown-menu-with-example\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"CSS dropdown menu with example\",\"datePublished\":\"2014-12-18T10:59:30+00:00\",\"dateModified\":\"2014-12-27T12:54:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/\"},\"wordCount\":50,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"Code Library\",\"CSS\",\"Examples\",\"Freebies\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/\",\"name\":\"CSS dropdown menu with example - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-18T10:59:30+00:00\",\"dateModified\":\"2014-12-27T12:54:08+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS dropdown menu with example\"}]},{\"@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":"CSS dropdown menu with example - 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\/labs\/css-dropdown-menu-with-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS dropdown menu with example - Vishmax.com","og_description":"Here is a simple css drop down menu which can be useful in web design projects. You can view the working example and also find the source code used in demo. Hope it will be helpful for web designers. HTML Part Home About us Services Web Design Web Development WordPress Development Products Web CRM Software [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-18T10:59:30+00:00","article_modified_time":"2014-12-27T12:54:08+00:00","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\/labs\/css-dropdown-menu-with-example\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"CSS dropdown menu with example","datePublished":"2014-12-18T10:59:30+00:00","dateModified":"2014-12-27T12:54:08+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/"},"wordCount":50,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["Code Library","CSS","Examples","Freebies","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/","url":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/","name":"CSS dropdown menu with example - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-18T10:59:30+00:00","dateModified":"2014-12-27T12:54:08+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/css-dropdown-menu-with-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS dropdown menu with example"}]},{"@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\/1832"}],"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=1832"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/1832\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=1832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=1832"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=1832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}