How To Add Pure CSS Horizontal Menu For Bloggers

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

div#navmenu { margin: 0 0 0 0px; padding: 0; height: 44px; float: left;overflow:hidden;background-color:#323232;width:100%; }
div#navmenu ul { display: block; margin: 0; padding: 0 0 0 2px; height: 44px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0 2px 0 0; float: left; height: 44px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 5px 0 0 0; height: 39px; line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
color: #ffffff;float: left;
}
div#navmenu ul li a span, div#navmenu ul li a:visited span {
display: block; float: left; margin: 0; padding: 0 0 0 26px;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a span span, div#navmenu ul li a:visited span span {
display: block; float: left; margin: 0; padding: 0 26px 0 0;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a:hover, div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
color: #ff9600;
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxX8tpp_aU6PpsAVP7dd5HDPjPOUomkXh-19lyTcWWBp6GoB5dzdYAg41534-ChCXG0vUGUr0P9JG7q5_tCd2dwNgVf8phWQX5u8PhLlrGXCwpfdJX-LWFa11obvk3GG-N6jTYHnO_R61z/&#39;) repeat-x scroll left bottom; text-decoration: none;
}
div#navmenu ul li a:hover span, div#navmenu ul li.current_page_item a span, div#navmenu ul li.current_page_item a:visited span {
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgHnP6xFWE84tefXqcOud-IoZgUUa-kVlqoSMzoo32UmEsXG64CH-avy36zi3MO6aibAfRmPzTd0jwfHNbY3VAAiME6shIh4DNpx8ML21ghIa2hQEkko4ArFobZ8ygHmvgMeQxtkC_bZz/&#39;) no-repeat scroll left bottom; text-decoration: none;
color: #ff9600;
}
div#navmenu ul li a:hover span span, div#navmenu ul li.current_page_item a span span, div#navmenu ul li.current_page_item a:visited span span {
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHH0NaSfgaTznVyQeFwb7JtkCi6-qEFYHNNYuTW_4iRhHyfBJ04zMr5kDgEg0Xuee5naz9GFRYCtqu9FsWmll6lDA_XSt8pW9m0gP0N-IQAIdim6VAbTaBmJJY5hITnJT6dgTZrqAjpnn/&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}

</style>

Note:Host above 3 images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='navmenu'>
<ul>

<li class='current_page_item'><a href='#'><span><span>Home</span></span></a></li>

<li class='page_item page-item-2'><a href='#' title='HTML Tutorials'><span><span>HTML</span></span></a></li>

<li class='page_item page-item-3'><a href='#' title='CSS Tutorials'><span><span>CSS</span></span></a></li>

<li class='page_item page-item-4'><a href='#' title='JS Tutorials'><span><span>Java Script</span></span></a></li>

<li class='page_item page-item-5'><a href='#' title='About us'><span><span>About</span></span></a></li>

<li class='page_item page-item-6'><a href='#' title='Contact us'><span><span>Contact</span></span></a></li>

</ul>
</div>

You are done.Look at the picture below.

Demo