Plain Red Navigation for Blogger

Plain Red Navigation for Blogger

menu widget

A menu is an important part of any blog. It is very essential tool for any blog. Many visitors that come on site usually search more useful information through Menus. A menu is a widget in which different categories are available in one widget. Because stylish menu are not available in blogger default templates that's why Today I am sharing a drop down gradient menu. It is created with HTML and CSS. This menu will spice your blog. Drop down menu has a lot of subcategories. This menu has a gradient color.

Live Demo
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place the Gadget below header. that's it.

@import "";
nav ul ul {
    display: none;
nav ul li:hover > ul {
    display: block;
    width: auto;
nav ul {
    background: -ms-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
    background: -moz-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
    background: -webkit-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.42);
    list-style: none;
    position: relative;
    display: inline-block;
    font-family: "ABeeZee",tahoma,serif;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    width: 70%;
nav ul:after {
    content: ""; clear: both; display: block;
nav ul li {
    float: left;
nav ul li:hover {
    background: #aa0c20;
nav ul li:hover a {
    color: #fff;
nav ul li a {
    display: block; padding: 10px; text-decoration: none;
nav ul ul {
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
nav ul ul li {
    float: none;
    border-top: 1px solid #aa0c20;
    border-bottom: 1px solid #aa0c20;
    position: relative;
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
nav ul ul li:hover {
    background: #aa0c20;
nav ul ul ul {
    position: absolute; left: 100%; top:-1px;
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">link 1</a><ul>
<li><a href="#">sub link 1</a></li>
<li><a href="#">sub link 2</a></li>
<li><a href="#">sub link 3</a></li>
<li><a href="#">Contact Us</a></li>


  • Replace # with your label's links

Write For Us Guest Writer
Guest Post by Furqan Haider
Furqan Haider is a young blogger from Pakistan, Karachi. He loves to read articles about Make Money, Blogging Tips And Tricks etc. He is currently running his entertainment blog OnlineFunBook.
Plain Red Navigation for Blogger
4 Stars stars - "Plain Red Navigation for Blogger " A menu is an important part of any blog. It is very essential tool for any blog. Many visitor...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *