{"id":2173,"date":"2011-05-23T01:19:59","date_gmt":"2011-05-22T19:49:59","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2173"},"modified":"2011-05-23T01:19:59","modified_gmt":"2011-05-22T19:49:59","slug":"create-pure-css-based-menu-step-by-step-tutorial","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-pure-css-based-menu-step-by-step-tutorial\/","title":{"rendered":"Create Pure CSS based Menu &#8211; Step by Step Tutorial"},"content":{"rendered":"<p>After a long time i am going to write the article on CSS and HTML. \u00a0In this tutorial i am going to create a pure CSS based Menu with description of lots of CSS property and problems faced by the web developer. One advantage of having CSS based Menu rather than \u00a0JavaScript\u00a0based Menu is that it is very light weight and cross browse\u00a0compatible. I have used\u00a0CSS based Menu in my website <a title=\"Shivasoft site\" href=\"https:\/\/www.jitendrazaa.com\">https:\/\/www.jitendrazaa.com<\/a><\/p>\n<h3><a href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-Menu.html\">Live Demo &#8211; Pure CSS based Menu<\/a><\/h3>\n<h2><span style=\"font-size: 13px; font-weight: normal;\">Lets consider below HTML code on which we want to create a Menu.<\/span><\/h2>\n<p><!--more--><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;Menu&quot;&gt;\n&lt;ul&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt; Home&lt;\/a&gt;&lt;\/li&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt;Menu 2&lt;\/a&gt;\n&lt;div class=&quot;SubMenu&quot;&gt;\n&lt;ul&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt;Sub Menu 1&lt;\/a&gt;&lt;\/li&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt;Sub Menu 2&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/div&gt;&lt;\/li&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt;Menu 3&lt;\/a&gt;\n&lt;div class=&quot;SubMenu&quot;&gt;\n&lt;ul&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt;Sub Menu 3&lt;\/a&gt;&lt;\/li&gt;\n\t&lt;li&gt;\n\t\t&lt;a href=&quot;#&quot;&gt;Sub Menu 4&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/div&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre>\n<p>Output of the code look like:<\/p>\n<div style=\"background-color: #f5e2ba; border: 1px solid #ccc; width: 100%; padding-top: 10px; margin-top: 10px; color: #140b5c;\">\n<ul>\n<li><a href=\"#\">Home<\/a><\/li>\n<li> <a href=\"#\">Menu 2<\/a>\n<div class=\"SubMenu\">\n<ul>\n<li> <a href=\"#\">Sub Menu 1<\/a><\/li>\n<li> <a href=\"#\">Sub Menu 2<\/a><\/li>\n<\/ul>\n<\/div>\n<\/li>\n<li> <a href=\"#\">Menu 3<\/a>\n<div class=\"SubMenu\">\n<ul>\n<li> <a href=\"#\">Sub Menu 3<\/a><\/li>\n<li> <a href=\"#\">Sub Menu 4<\/a><\/li>\n<\/ul>\n<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<p>As you can see from above output we need few modifications:<br \/>\nRemove the bullets from the list, make horizontal list and hide the submenu.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.Menu li\n{\n\t\/* Dont show the bullet on list*\/\n\tlist-style:none;\n\n\t\/* Make horizontal list *\/\n\tfloat:left;\n}\n.Menu .SubMenu\n{\n\tdisplay:none;\n\tposition:absolute;\n\tmargin-left:-40px;\n}\n\/* Style for the sub menu *\/\n.SubMenu li\n{\n\t\/* Make Verticle list *\/\n\tfloat:none !important;\n\twidth:100px;\n\tmargin-top:5px;\n}\n<\/pre>\n<p>CSS code written above is commented and self explanatory.<br \/>\nNow we want to display the sub-menu on the hover of the main-menu. So below CSS will be used:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.Menu li:hover .SubMenu\n{\n\tdisplay:block;\n}\n<\/pre>\n<p>Its time to give the style to anchor tag like background color, hover color etc.<br \/>\nTherefore the final CSS will look like:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.Menu li\n{\n\t\/* Dont show the bullet on list*\/\n\tlist-style:none;\n\n\t\/* Make horizontal list *\/\n\tfloat:left;\n}\n.Menu .SubMenu\n{\n\tdisplay:none;\n\tposition:absolute;\n\tmargin-left:-40px;\n}\n\/* Style for the sub menu *\/\n.SubMenu li\n{\n\t\/* Make Verticle list *\/\n\tfloat:none !important;\n\twidth:100px;\n\tmargin-top:5px;\n}\n\/*On hover display menu*\/\n.Menu li:hover .SubMenu\n{\n\tdisplay:block;\n}\n.Menu a\n{\n\tpadding:5px;\n\tbackground-color:#fe9900;\n}\n.SubMenu li a\n{\n\twidth:100px;\n\tfloat:left;\n\tpadding:5px 10px 5px 20px;\n\tbackground-color:#f5e2ba;\n}\n.SubMenu li a:hover\n{\n\tbackground-color:#140b5c;\n\tcolor:#FFFFFF;\n\t\/* Remove Underline *\/\n\ttext-decoration:none;\n}\n<\/pre>\n<p>And the output is<\/p>\n<figure id=\"attachment_2176\" aria-describedby=\"caption-attachment-2176\" style=\"width: 256px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-menu.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2176\" title=\"Pure CSS based menu\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-menu.png?resize=256%2C107&#038;ssl=1\" alt=\"Pure CSS based menu\" width=\"256\" height=\"107\" \/><\/a><figcaption id=\"caption-attachment-2176\" class=\"wp-caption-text\">Pure CSS based menu<\/figcaption><\/figure>\n<p><strong>Question : Why CSS Hover property is not working in Internet explorer?<\/strong><br \/>\nThis is the question lots of time asked by the developer. By default IE supports the hover property for the anchor tag and if you want to tell IE to support hover property for the remaining elements also, we must introduce the <strong>DOCTYTPE <\/strong>tag at the starting of the html document.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE HTML PUBLIC &quot;-\/\/W3C\/\/DTD HTML 4.01\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/html4\/strict.dtd&quot;&gt;\n<\/pre>\n<h3 style=\"text-align: center;\"><a href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-Menu.html\">Live Demo &#8211; Pure CSS based Menu <\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial on creating step by step pure CSS based Menu without any javaScript and Why CSS Hover property is not working in Internet explorer<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[67,338],"class_list":["post-2173","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-web"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":2173,"position":0},"title":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","author":"Jitendra","date":"February 19, 2011","format":false,"excerpt":"Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/02\/Ajax-Based-Multiselect-JQuery-Autocomplete-Control-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2843,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/streaming-api-using-jquery-salesforce\/","url_meta":{"origin":2173,"position":1},"title":"Streaming API Using JQuery &#8211; Salesforce","author":"Jitendra","date":"May 6, 2012","format":false,"excerpt":"Tutorial of Streaming API in Salesforce with Source code and Demo Video - Implementation of Bayeux protocol and CometD using JQuery and JSON","rel":"","context":"In &quot;Tech Tips&quot;","block_context":{"text":"Tech Tips","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/tips\/"},"img":{"alt_text":"Salesforce Streaming API - Create Push topic","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":2173,"position":2},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":594,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-gradient-header-using-css\/","url_meta":{"origin":2173,"position":3},"title":"Create Gradient Header using CSS","author":"Jitendra","date":"July 6, 2010","format":false,"excerpt":"Create a Gradient effect in heading tag of HTML using simple CSS trick","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Create attractive headers in HTML using CSS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/07\/header.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":65,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/highlight-current-field-using-jquery\/","url_meta":{"origin":2173,"position":4},"title":"Highlight Current field using JQuery","author":"Jitendra","date":"May 10, 2010","format":false,"excerpt":"Write below HTML code : This will create two text boxes. [sourcecode lang=\"css\"] <form> <div> <label for=\"Name\">Name:<\/label> <input name=\"Name\" type=\"text\"><\/input> <\/div> <div> <label for=\"Email\">Email:<\/label> <input name=\"Email\" type=\"text\"><\/input> <\/div> <\/form> [\/sourcecode] Using jQuery, we can watch for an event where an input form comes into focus: Add link to JQuery file\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Selecting field using jquery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/11-300x50.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":827,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/add-css-programatically-in-asp-net\/","url_meta":{"origin":2173,"position":5},"title":"Add CSS Programatically in ASP.NET","author":"Jitendra","date":"September 3, 2010","format":false,"excerpt":"Tutorial on adding the CSS file dynamically in ASP.NET and C# \/ VB.Net","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2173"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2173\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}