category on there.Other thing is, you can add beautiful menu
bar for your blog to make your blog attractive. This is a cool
horizontal menu bar for your blogger. you can try it.
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag

#NavbarMenu {
width: 1000px;
height: 35px;
background:#cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtGMeoK-etEgD8hIhERyAuLXZRKSlr2XydH9OkcB0BYnv02xgo427a6csdcd-Li5-TmUHHMIoRKy-9ODbvFRWn1fyop8yg3JY6S2l6ZF1UbHlpKoof6I38axfCTUyx_AqDG2ck3q83h0/s1600/white+to+black.png) repeat-x top;
color: #cdaa7d
margin: 0 auto 0;
padding: 0;
font: normal 12px Arial, Tahoma, Verdana;
border-top: 1px solid #855e42;
border-bottom: 1px solid #855e42;
margin-top:-45px;
}
#NavbarMenuleft {
width: 1000px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ff0000;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: bold 12px Arial, Tahoma, Verdana;
}
#nav li a:hover, #nav li a:active {
background:#ffffff;
color: #8b5a00;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtGMeoK-etEgD8hIhERyAuLXZRKSlr2XydH9OkcB0BYnv02xgo427a6csdcd-Li5-TmUHHMIoRKy-9ODbvFRWn1fyop8yg3JY6S2l6ZF1UbHlpKoof6I38axfCTUyx_AqDG2ck3q83h0/s1600/white+to+black.png) repeat-x top;
width: 140px;
color: #fff;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #855e42;
border-left: 1px solid #855e42;
border-right: 1px solid #855e42;
font: normal 12px Arial, Tahoma, Verdana;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff;
color: #8b5a00;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='URL'>Menu 1</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
<li><a href='URL'>Sub Menu 4</a></li>
<li><a href='URL'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='URL'>Menu 2</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
<li><a href='URL'>Sub Menu 4</a></li>
<li><a href='URL'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='URL'>Menu 3</a>
</li>
<li><a href='URL'>Menu 4</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
<li><a href='URL'>Sub Menu 4</a></li>
<li><a href='URL'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='URL'> Menu 5</a>
</li>
<li><a href='URL'>Menu 6</a>
</li>
<li><a href='URL'>Menu 7</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
<li><a href='URL'>Sub Menu 4</a></li>
<li><a href='URL'>Sub Menu 6</a></li>
</ul>
</li>
</ul>
</div>
</div>
*Replace URL With your URL
*Replace Menu and sub menu with your any menu name
7. Now save your template
you are done.