How To Create Horizontal Tab Menu Using CSS

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<style type='text/css'>
#tabs28 {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabs28 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs28 li {
display:inline;
margin:0;
padding:0;
}
#tabs28 a {
float:left;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VRpdG3nRJaFkujvKTPF3ADuA6KRUlKn-HnAK1Nrfne5-VUSs-Rj8b8GLq1f1NRDT6tJylZqT39NVYmKNs8d7v5So7r6uMY_qlPoWrv5W5e04yOoC1DswaIFXIfd-27esZUb7YfMUp5e8/&quot;) no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabs28 a span {
float:left;
display:block;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFkW6z4Y5c4Du4OVBCnJXxzrn5sfC7meKbMm0AfpRQx-QKh9EZcFZHzBGhwuE2-Eq8yco_aOM6opHoSfxU9DbIlmAG-mx8o5chulT_6RqUZx3CaQvaOeF-oVHsoeDR395V3DfIRL-C7Lf/&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs28 a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabs28 a:hover {
background-position:0% -42px;
}
#tabs28 a:hover span {
background-position:100% -42px;
}
</style>

Note : Please Host above 2 images yourself.

NOW CLICK SAVE TEMPLATE

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<div id="tabs28">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

NOW CLICK SAVE

thanks to Lasantha Bandara