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.
Open Comment Box

Contact Form


Email *

Message *