Multi Colored CSS Menu

Menu is the fundamental part of any website models. What's more by utilizing Stylish menu bar you can make your online journal's look more dazzling. So I am offering to you in this excercise a wonderful colorful menu with wrapping impacts. You will get 6 colorful menu catch and when you will rodent over the menu then it will unwrap a little part on upper right corner. Also it is extremely simple to Install.

• Log in to your Blogger account and Go to your Blogger Dashboard
• Go to your Layout tab.
• Click on "Add a Gadget" then select "HTML/JavaScript" Widget.
• Drag the Gadget below Header.
• Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>
#cbmmenu{width:100%;color:#666;font:12px/18px Tahoma, Arial, Helvetica, sans-serif;}#cbmmenu ul{list-style:none;padding:5px;}#cbmmenu li{list-style:none;display:block;float:left;height:37px;line-height:37px;text-align:center;margin:0 5px;}#cbmmenu li a{display:block;float:left;font-weight:bold;color:#fff;text-decoration:none;padding:5px 35px;text-transform:uppercase;}#cbmmenu li a:hover{text-decoration:none;}#cbmmenu li a.red{background:#c40d0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2zn0CXDX0bdo7ge89J8jBFFnEQDRc4bktPL8xK9xBN3XldhYYF7pAHQlg1LYjQVV0hVjd4UJc7YUC7GQbpIP5AbzhiDlscfFT0qU7c1Zp1RaqT23r95MtVRLJaSIMh9yDou8Ah_GerB7q/s1600/r_f.gif) no-repeat left top;}#cbmmenu li a:hover.red{background:#c40d0b none;}#cbmmenu li a.orange{background:#f26522 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg87jLz2OVcVFxYhgwnyRLyDp6-W974cpjBzlT5-55xgKNlSkW7hug2_2lMfZ6Yf-QXGSlZ9zBz6BnLMgQU4nVV5XDbEja-JdlFoqYqD53Wpq5qa3coaxbcrmrbbMok_dYgDJ1M0i1p2RG0/s1600/o_f.gif) no-repeat left top;}#cbmmenu li a:hover.orange{background:#f26522 none;}#cbmmenu li a.yellow{background:#e4c016 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHfRY_0xGSgSMIpDEKI4T49S5F_QJlxXyqNL1I0Rc_Z5JuU7zuay1Gdppj0EsVECjuVQ3GcnfxqCICtKzcC2jaxp1RvOo-WiSDeqgVZn6RSFg9Lefja6QyBMf1JJGNRfCwMRTqDEtAo9f/s1600/y_f.gif) no-repeat left top;}#cbmmenu li a:hover.yellow{background:#e4c016 none;}#cbmmenu li a.green{background:#219e0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEcGlQT4a7I39QllKDz5A7I-F1stJM086tuXGMgGa7OwCEKs9w72Feky5OxSxvlMaOZXuJl328XuY-XwRN0m7w751M_eVChDgFGdCD-g5SGkk3_2WbCavNH5cDV2O9_nu3RembaOqf5yO/s1600/g_f.gif) no-repeat left top;}#cbmmenu li a:hover.green{background:#219e0b none;}#cbmmenu li a.blue{background:#2c88ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnrYgtdK0A_rHT0FzxbjUizUnExKCmXVxYgX4BlIb6DEgK6aN84PvaB_dwgSKhvezeYeTz6KEirvL1Pd2kmomnG46PZ1YC7EVVyNAyXXqnTprZPrJNOAayXh4gL4SwqSJvOXZ95JqhdHR/s1600/b_f.gif) no-repeat left top;}#cbmmenu li a:hover.blue{background:#2c88ce none;}#cbmmenu li a.grey{background:#939393 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiYPtYZT9-kFFgHjox1C0cWgV0wT5Jfh2X3QTDqV9y3uTbSxTH-mv0p6jsWNnY3zzix9bRdW10ExY2nfTyYUHHKiq75fqL9Z1FvB2krghtFhJhiA7G_TJaGRzv4L2fdPDD7Fg0QoYEKR3f/s1600/gr_f.gif) no-repeat left top;}#cbmmenu li a:hover.grey{background:#939393 none;}
</style>
<div id="cbmmenu"><ul><li><a class="red" href="URL Here">Home</a></li><li><a class="orange" href="URL Here">About us</a></li><li><a class="yellow" href="URL Here">HTML</a></li><li><a class="green" href="URL Here">Widget</a></li>
<li><a class="blue" href="URL Here">Contact us</a></li>
<li><a class="grey" href="URL Here">Sitemap</a></li>
</ul>
</div>

• Change all URL Here with your own links. And Save it.