A Neat Bold Red Drop Down Menu For Blogger Using Just Css




| 15 comments

In the last post we had a tutorial for a very unique style of drop down navigation menu for Blogger.That menu used a horizontal bar as the drop down to display links on hover.This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.

drop down menu blogger

View Demo Button

This menu is also courtesy of the awesome Free Css Menu, let's add it to your blog.

Add The Bold Red Drop Down Menu To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(http://3.bp.blogspot.com/-jEZvPu90bIA/TjlATeBIGoI/AAAAAAAAE4A/shxxdvs2fHI/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(http://1.bp.blogspot.com/-NjNjSmAlq34/TjlATMvGF7I/AAAAAAAAE38/UxPs9Qg4Fyg/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.spiceupyourblog.com*/

Step 4. Save your template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


Add The Menu Html


In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.

Template Designer Tabs Fix


If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

That's it simple ! Make sure to check out more of our Css tutorials and Blogger gadgets.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

15 comments:

  1. can we put this instead of the blogger navbar if yes plzzz help me doin that.....

    ReplyDelete
  2. thanks for this post @Paul
    i always use your tips in my blog
    http://cargoogler.blogspot.com/
    which helped it much
    so thanks Paul for your useful tips

    ReplyDelete
  3. Please help. I've tried using your red drop down menu for my site. But seems to have a problem. My drop down menu is being hidden by my main wrapper. Please help me solve this. Thank you

    ReplyDelete
  4. I have never found such a helpful website/blog. Thanks for all the knowledge!!

    ReplyDelete
  5. Thanks So Much Its 100% working keep it up Dude! Awesome Site I have Found..Thanks Again

    ReplyDelete
  6. how to made id=current when viisting on page other than home

    ReplyDelete
  7. A great site!. Thanks for Sharing all the knowledge!!
    But this is not working properly on my blog, when I placed This menu on my blog site http://south-asian-models.blogspot.com on the top, colour are not working properly...can any one say whats the problem?

    ReplyDelete
  8. I am brand new to html and especially to css. I managed to get it to work and I see how to rename the links and add the link href etc. This may sound like a dumb question but how to I change that background color, text color, button color. It's got to be some thing easy. Feel free to answer here if you would do me that kindness or send me a message through my google profile. Thanks

    ReplyDelete
  9. I was wondering the same thing. I installed the blue one--not the red, and I love it but the bright blue background really doesn’t go with my blog.

    ReplyDelete
  10. IN firfox very good but in IE the drop down menu is being hidden by the main wrapper why is that help plz and tnx for this

    ReplyDelete
  11. hello congratulations for this blog, it has helped me a lot. I have placed this menu in my blog, on firefox and chrome it is working propely but on internet explorer the menu appears behind pictures or videos :(
    is there anything i can do to solve this

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us