How to add a menu bar to my page?

What is the simplest method for adding a menu bar to my page? This is one of the most searched queries about the blog. Here is a simple method for creating a blog menu bar. well i would like to say this will be the simplest method for creating blog menu in the world.

Step 1
Configure your blog so that you can add an element at the top of your after your blog's header element.

To do that---- Click 'Edit Template' in your template tab and search for the key word "Maxwidgets". change the maxwidget value from 1 to 3. And also search for "ShowaddElement" and change the value as "yes". Now save your template and settings. Now you can see that there will be one more provision at the top of your page as the "Add Element" to add an additional element before of after your blog header. Now you have finished your first step. Move to the second step...

Step 2
Select layout from the template tab and click on "add a new element" at the top of the page. select the html/third party code to insert the following code

<style type="text/css"><br /><br />/*Credits: Jaishine */<br />/*URL: http://www.jaishine.blogspot.com */<br /><br />#chromemenu{<br />width: 99%;<br />font-weight: bold;<br />font-size: 90%;<br />}<br /><br />#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/<br />content: "."; <br />display: block; <br />height: 0; <br />clear: both; <br />visibility: hidden;<br />}<br /><br />#chromemenu ul{<br />border: 1px solid #BBB;<br />width: 100%;<br />background: url(media/chromebg.gif) center center repeat-x;<br />padding: 5px 0;<br />margin: 0;<br />text-align: left; /*set value to "right" for example to align menu to the left of page*/<br />}<br /><br />#chromemenu ul li{<br />display: inline;<br />}<br /><br />#chromemenu ul li a{<br />color: #494949;<br />padding: 5px;<br />margin: 0;<br />text-decoration: none;<br />border-right: 1px solid #DADADA;<br />}<br /><br />#chromemenu ul li a:hover{<br />background: url(media/chromebg2.gif) center center repeat-x;<br />}<br /><br /></style><br /><div id="chromemenu"><br /><ul><br /><li><a href="http://www.jaishine.blogspot.com/">Dynamic Drive</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">CSS Library</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">CSS Drive</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">Gif Optimizer</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">Favicon Creator</a></li><br /><li><a href="http://www.jaishine.blogspot.com/">Button Maker</a></li><br /></ul><br /></div>
----------
here you have finished your second step. Now the third and last step..

Step 3
Download to local drive on your computer and then Upload the same images that are required for the working of our menu to some image hosting sites and get the links. In the code search for a line like "background: url(media/chromebg.gif) center center repeat-x;" and edit the part within the parenthesis with your link to the image location.
Done !!! Now arrange the position of your menu in the layout as you like.Do not forget to edit your links!

Images