<\/br>
\n<\/br>
\n<\/br>
\n<\/br><\/p>\n
Step-1 Open an html document. Write the following html code inside the body tag:<\/p>\n
\n<li><a href=”#” id=”home”>Home Page<\/a><\/li>
\n<li><a href=”#” id=”about”>About Us<\/a><\/li>
\n<li><a href=”#” id=”webdesign”>Web Design<\/a><\/li>
\n<li><a href=”#” id=”graphicdesign”>Graphic Designs<\/a><\/li>
\n<li><a href=”#” id=”seo”>Search Engine Optimization SEO<\/a><\/li>
\n<li><a href=”#” id=”contact” >Contact Us<\/a><\/li>
\n<\/ul><\/div>\n
<\/br>
\nStep-2\u00a0 Create a new CSS document and write the following CSS syntax and save it as MAIN.CSS.Here background position defined to draw the different position of the button into visible.<\/p>\n
\n#navigation:hover li a#webdesign { background-position: -280px; }
\n#navigation:hover li a#home { background-position: -206px; }
\n#navigation:hover li a#graphicdesign { background-position: -340px; }
\n#navigation:hover li a#contact { background-position: -232px; }
\n#navigation:hover li a#about { background-position: -242px; }
\n#navigation:hover li a#seo { background-position: -540px; }
\n#navigation li { float: left; }
\n#navigation li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }
\n#home { background: url(home.gif); width: 103px; }
\n#home:hover { background: url(home.gif) 0 0 !important; }
\n#about { background: url(about.gif); width: 121px; }
\n#about:hover { background: url(about.gif) 0 0 !important; }
\n#webdesign { background: url(webdesign.gif); width: 140px; }
\n#webdesign:hover { background: url(webdesign.gif) 0 0 !important; }
\n#graphicdesign { background: url(graphicdesign.gif); width: 170px; }
\n#graphicdesign:hover { background: url(graphicdesign.gif) 0 0 !important; }
\n#seo { background: url(seo.gif); width: 281px; }
\n#seo:hover { background: url(seo.gif) 0 0 !important; }
\n#contact { background: url(contact.gif); width: 116px; }
\n#contact:hover { background: url(contact.gif) 0 0 !important; }<\/div>\n
<\/br>
\nStep-3 Paste the following code inside the <head><\/head> tag in HTML file to link the MAIN.CSS.<\/p>\n
<\/br>
\nStep-4 Your HTML, CSS and below images should be in same folder.<\/p>\n
Now run the program.<\/p>\n","protected":false},"excerpt":{"rendered":" Home Page About Us Web Design Graphic Designs Contact Us Step-1 Open an html document. Write the following html code inside the body tag: <ul id=”navigation”> <li><a href=”#” id=”home”>Home Page<\/a><\/li> <li><a href=”#” id=”about”>About Us<\/a><\/li> <li><a href=”#” id=”webdesign”>Web Design<\/a><\/li> <li><a href=”#” id=”graphicdesign”>Graphic Designs<\/a><\/li> <li><a href=”#” id=”seo”>Search Engine Optimization SEO<\/a><\/li> <li><a href=”#” id=”contact” >Contact Us<\/a><\/li> <\/ul> Step-2\u00a0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[90,6,5],"tags":[135,134,137,136],"class_list":["post-1596","post","type-post","status-publish","format-standard","hentry","category-html","category-web-design","category-web-design-tips","tag-css-background-positioning","tag-css-navigation-menu","tag-html-navigation-menu","tag-x-advanced-background-positioning-css"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=1596"}],"version-history":[{"count":42,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1596\/revisions"}],"predecessor-version":[{"id":1655,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1596\/revisions\/1655"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=1596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=1596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=1596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![](\"http:\/\/www.searchenginegenie.com\/web-design-blog\/wp-content\/uploads\/2012\/04\/home.gif\")
<\/span><\/a><\/div> \r\n\r\n\t\t\t\t \r\n <\/div><\/a><\/p>\n