{"id":698,"date":"2009-07-04T06:26:50","date_gmt":"2009-07-04T06:26:50","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=698"},"modified":"2018-07-25T23:13:33","modified_gmt":"2018-07-25T23:13:33","slug":"pure-css-dropdown-menu-without-useing-javascript","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/07\/pure-css-dropdown-menu-without-useing-javascript\/","title":{"rendered":"Pure Css Dropdown Menu Without Using Javascript"},"content":{"rendered":"<p>This is a tutorial on how to create pure CSS Drop down menu without using javascript. I noticed however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS.<br \/>\n<!--more--><br \/>\nHere is the<a href=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/how-create-dropdown-menu-with-css.html\"> example<\/a><br \/>\n<a href=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/how-create-dropdown-menu-with-css.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-699\" title=\"pure-css-dropdown-menu\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/pure-css-dropdown-menu.jpg\" alt=\"pure-css-dropdown-menu\" width=\"463\" height=\"222\" srcset=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/pure-css-dropdown-menu.jpg 463w, http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/pure-css-dropdown-menu-300x143.jpg 300w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/a><\/p>\n<p>Step first : we create a basic HTML structure.<\/p>\n<pre>[code lang=\"htmlstrict\"]\r\n<div id=\"header\">\r\n<h1>Developer's Paradise demos<\/h1>\r\n<ul id=\"menu\">\r\n\t<li><span>Home<\/span>\r\n<ul>\r\n\t<li><a href=\"#\">Menu item 1<\/a><\/li>\r\n\t<li><a href=\"#\">Menu item 2<\/a><\/li>\r\n\t<li><a href=\"#\">Menu item 3<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li><span>About Us<\/span>\r\n<ul>\r\n\t<li><a href=\"#\">Menu item 1<\/a><\/li>\r\n\t<li><a href=\"#\">Menu item 2<\/a><\/li>\r\n\t<li><a href=\"#\">Menu item 3<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li><span>Products<\/span>\r\n<ul>\r\n\t<li><a href=\"#\">Menu item 1<\/a><\/li>\r\n\t<li><a href=\"#\">Menu item 2<\/a><\/li>\r\n\t<li><a href=\"#\">Menu item 3<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n[\/code]<\/pre>\n<p>Step second : now we create magic CSS code<\/p>\n<pre>[code lang=\"css\"]\r\n*{ margin:0; padding:0;}\r\n\r\nbody {\r\nbackground:#222;\r\nfont:100% normal Arial, Helvetica, sans-serif;\r\n}\r\n\r\nh1 {color:#fff;}\r\n\r\n#header {\r\nheight:120px; position:relative;\r\nbackground:#333;\r\n}\r\n\r\n#menu {\r\nmargin:0px;\r\npadding:0px;\r\nposition:absolute;\r\ntop: 70px;\r\ndisplay:block;\r\n}\r\n\r\n#menu &gt; li {\r\nlist-style-type:none;\r\nfloat:left;\r\ndisplay:block;\r\nmargin:0px 10px;\r\nposition:relative;\r\npadding:10px;\r\nwidth:100px;\r\n}\r\n\r\n#menu &gt; li:hover ul {\r\ndisplay:block;\r\n}\r\n\r\n#menu &gt; li:hover {\r\nbackground-color:#808080;\r\n-moz-border-radius:10px;\r\n-webkit-border-radius:10px;\r\n}\r\n\r\n#menu li ul {\r\nmargin:0px;\r\npadding:0px;\r\ndisplay:none;\r\n}\r\n#menu li ul li {\r\nlist-style-type:none;\r\nmargin:10px 0 0 0;\r\nfont-size:11px;\r\n}\r\n\r\n#menu li ul li a {\r\ndisplay:block;\r\npadding:5px 10px;\r\ncolor:#fff;\r\ntext-decoration:none;\r\nfont-weight:bold;\r\n}\r\n\r\n#menu li ul li:hover a {\r\nbackground-color:#606060;\r\n-moz-border-radius:5px;\r\n-webkit-border-radius:5px;\r\n}\r\n\r\n#menu li span {\r\ncursor:pointer;\r\nmargin:0px 10px;\r\nfont-weight:bold;\r\ncolor:#fff; font-size:11px;\r\n}\r\n[\/code]<\/pre>\n<p>Please note that this code doesn&#8217;t work in IE6 (this poor browser just doesn&#8217;t know what ul &gt; li means).<\/p>\n<p>I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below. Here is a link to our preferred site if you wish to <a href=\"http:\/\/www.networksolutions.com\/domain-name-registration\/index.jsp\" target=\"_blank\">register a Domain name<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a tutorial on how to create pure CSS Drop down menu without using javascript. I noticed however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-698","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=698"}],"version-history":[{"count":18,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/698\/revisions"}],"predecessor-version":[{"id":704,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/698\/revisions\/704"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=698"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}