{"id":46,"date":"2009-06-10T09:48:23","date_gmt":"2009-06-10T09:48:23","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=46"},"modified":"2018-04-14T17:04:09","modified_gmt":"2018-04-14T17:04:09","slug":"tutorial-to-create-a-beautiful-simple-horizontal-css-menu","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/tutorial-to-create-a-beautiful-simple-horizontal-css-menu\/","title":{"rendered":"Tutorial to create a Beautiful, simple, horizontal CSS menu"},"content":{"rendered":"<p>This is a very simple, horizontal css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect.<\/p>\n<p>First of all let us write CSS code for menu. here goes the code..<\/p>\n<p><!--more--><\/p>\n<p>[code lang=&#8221;css&#8221;]<\/p>\n<p>#nav<br \/>\n{<br \/>\n    padding:0;<br \/>\n}<br \/>\n[\/code]<br \/>\n[code lang=&#8221;css&#8221;]<br \/>\n#nav li<br \/>\n{<br \/>\n    display:inline;<br \/>\n}<br \/>\n[\/code]<br \/>\n[code lang=&#8221;css&#8221;]<br \/>\n#nav li a<br \/>\n{<br \/>\n   font-family:Arial;<br \/>\n   font-size:12px;<br \/>\n   text-decoration: none;<br \/>\n   float:left;<br \/>\n   padding:10px;<br \/>\n   background-color: #333333;<br \/>\n   color:#ffffff;<br \/>\n   border-bottom:1px;<br \/>\n   border-bottom-color:#000000;<br \/>\n   border-bottom-style:solid;<br \/>\n}<br \/>\n[\/code]<br \/>\n[code lang=&#8221;css&#8221;]<br \/>\n#nav li a:hover<br \/>\n{<br \/>\n   background-color:#9B1C26;<br \/>\n   padding-bottom:12px;<br \/>\n   border-bottom:2px;<br \/>\n   border-bottom-color:#000000;<br \/>\n   border-bottom-style:solid;<br \/>\n   margin:-1px;<br \/>\n}<br \/>\n[\/code]<\/p>\n<p>Second of all let us write HTML list for menu. Say we have 7 links, as shown in image, here goes the code..<\/p>\n<pre>\r\n[code lang=\"html4strict\"]\r\n<ul id=\"nav\">\r\n    <li><a href=\"#\">Home<\/a><\/li>\r\n    <li><a href=\"#\">About<\/a><\/li>\r\n    <li><a href=\"#\">Services<\/a><\/li>\r\n    <li><a href=\"#\">Products<\/a><\/li>\r\n    <li><a href=\"#\">Sitemap<\/a><\/li>\r\n    <li><a href=\"#\">Help<\/a><\/li>\r\n    <li><a href=\"#\">Contact Us<\/a><\/li>\r\n<\/ul>\r\n[\/code]\r\n<\/pre>\n<p>Yeah..! its done! see how simple is to create a CSS menu\u2026 A demo..?<\/p>\n<h3>Check out the demo below..<\/h3>\n<style>\n#nav ul {padding: 0; margin:;0; list-style-type:none;}\n#nav li {display: inline;}\n#nav li a {font-family: Arial;font-size:12px;text-decoration: none;float:left;padding: 10px;background-color: #333;color: #fff; border-bottom:1px solid #000;}\n#nav li a:hover {background-color: #9B1C26; padding-bottom:12px; border-bottom:2px solid #000; margin:-1px;}\n<\/style>\n<p><span style=\"display:block;\"><\/p>\n<ul id=\"nav\" style=\"clear:both;\">\n<li><a href=\"#\">Home<\/a><\/li>\n<li><a href=\"#\">About<\/a><\/li>\n<li><a href=\"#\">Services<\/a><\/li>\n<li><a href=\"#\">Products<\/a><\/li>\n<li><a href=\"#\">Sitemap<\/a><\/li>\n<li><a href=\"#\">Help<\/a><\/li>\n<li><a href=\"#\">Contact Us<\/a><\/li>\n<\/ul>\n<p><\/span><br \/>\n<span style=\"display:block;\"><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a very simple, horizontal css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. First of all let us write CSS code for menu. here goes the code..<\/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-46","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\/46","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=46"}],"version-history":[{"count":9,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":312,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions\/312"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}