This is a nice CSS menu-bar with colors. There have 4 colors, for choose.Im included a demo for this menu bar, you can check it from demo link.
4. Go to blogger Layout and add a HTML/Javascript gadget.
6. To change the style, you have to replace <div id="menu12_wrapper" class="grey"> with below styles
<div id="menu12_wrapper" class="black">
<div id="menu12_wrapper" class="blue">
<div id="menu12_wrapper" class="red">
<div id="menu12_wrapper" class="grey">
7. Now save your HTML/Javascript'.
You are done...
1. Go on your blog EDIT HTML option.
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag.
/* The CSS Code for the menu starts here */ #menu12 { font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; margin: 50px 0; padding: 0; list-style-type: none; background-color: #eee; font-size: 13px; height: 40px; border-top: 2px solid #eee; border-bottom: 2px solid #ccc; } #menu12 li { float: left; margin: 0; } #menu12 li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; color: #666; } #menu12 li a:hover, #menu li.active a { background-color: #f5f5f5; border-bottom: 2px solid #DDD; color: #999; } #menu12_wrapper ul {margin-left: 12px;} #menu12_wrapper {padding: 0 16px 0 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_rn24lmIca_yO_4Kmq7gxIJMAYEKcIy_JeaLvjoLKAsb8RENY3N1c0x6DFQ6c4668-4S9hdowu7qfMP7iFfgYO_gmeWfAc-VPKQahHLkKl6stYQ9InbC-3Mt0dD3cGj4AS2gMOdFnSA/s1600/grey.png) no-repeat right;} #menu12_wrapper div {float: left; height: 44px; width: 12px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_rn24lmIca_yO_4Kmq7gxIJMAYEKcIy_JeaLvjoLKAsb8RENY3N1c0x6DFQ6c4668-4S9hdowu7qfMP7iFfgYO_gmeWfAc-VPKQahHLkKl6stYQ9InbC-3Mt0dD3cGj4AS2gMOdFnSA/s1600/grey.png) no-repeat left;} /* Black Menu */ #menu12_wrapper.black ul { border-top: 2px solid #333; border-bottom: 2px solid #000; background: #333;} #menu12_wrapper.black a {color: #CCC;} #menu12_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;} #menu12_wrapper.black {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_GnLAiSb7aSFyKdc21eEjRdP3NmVP6D6i-YpQr4P40DKlBj6Giu4AhONTsYruhMc1nTypHsb17W3U5gPSxkMpuW6RZ3l2oK-0zsJ4iog4ZQqqbJ-bFtGGWUmvoSPaCAik_z0pVOXygo/s1600/black.png) no-repeat right;} #menu12_wrapper.black div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_GnLAiSb7aSFyKdc21eEjRdP3NmVP6D6i-YpQr4P40DKlBj6Giu4AhONTsYruhMc1nTypHsb17W3U5gPSxkMpuW6RZ3l2oK-0zsJ4iog4ZQqqbJ-bFtGGWUmvoSPaCAik_z0pVOXygo/s1600/black.png) no-repeat left;} /* Blue Menu */ #menu12_wrapper.blue ul { border-top: 2px solid #356AA0; border-bottom: 2px solid #204061; background: #356AA0;} #menu12_wrapper.blue a {color: #fff;} #menu12_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;} #menu12_wrapper.blue {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKWsA7TablAWM3NAp_afmNLWHpq2Ms04UnKi6j5XdS_4DflznohVDVrdH5BSMBjz00e35bvRHueru-XBotJEoaMSTKFaaRCvBFMiVxEI5DseQ5pKrP_Qgkrc2I8jDKOv_xoZqLLfX7XU/s1600/blue.png) no-repeat right;} #menu12_wrapper.blue div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKWsA7TablAWM3NAp_afmNLWHpq2Ms04UnKi6j5XdS_4DflznohVDVrdH5BSMBjz00e35bvRHueru-XBotJEoaMSTKFaaRCvBFMiVxEI5DseQ5pKrP_Qgkrc2I8jDKOv_xoZqLLfX7XU/s1600/blue.png) no-repeat left;} /* Red Menu */ #menu12_wrapper.red ul { border-top: 2px solid #660000; border-bottom: 2px solid #450000; background: #660000;} #menu12_wrapper.red a {color: #fff;} #menu12_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;} #menu12_wrapper.red {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5VjkmG3CQTs8m7c48LLYWFHc73ttD7lO_df88WP93XJ26UHFjJliF0Os_S7a58S6HqGvwUe9SlMdO8e7GdryAxwDQtb1YMeUuRCHsUceHfgKsWGNOv1WtcwULMt780cQA7DVHm32Q6Y/s1600/red.png) no-repeat right;} #menu12_wrapper.red div {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5VjkmG3CQTs8m7c48LLYWFHc73ttD7lO_df88WP93XJ26UHFjJliF0Os_S7a58S6HqGvwUe9SlMdO8e7GdryAxwDQtb1YMeUuRCHsUceHfgKsWGNOv1WtcwULMt780cQA7DVHm32Q6Y/s1600/red.png) no-repeat left;}
4. Go to blogger Layout and add a HTML/Javascript gadget.
5. Paste below code in it.
<!-- Grey Menu --> <div id="menu12_wrapper" class="grey"> <div class="left"></div> <ul id="menu12"> <li><a href="#">Home</a></li> <li class="active"><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="http://www.bloggertrix.com/">Add This</a></li> </ul> </div>
6. To change the style, you have to replace <div id="menu12_wrapper" class="grey"> with below styles
<div id="menu12_wrapper" class="black">
<div id="menu12_wrapper" class="blue">
<div id="menu12_wrapper" class="red">
<div id="menu12_wrapper" class="grey">
7. Now save your HTML/Javascript'.
You are done...