Simple CSS3 Dropdown Menu for Blogger BlogSpot

Simple CSS3 Dropdown Menu for Blogger BlogSpot

Comments: 0
CSS menu

Hi this is very simple CSS3 coded Deopdown navigation menu. It will work fine and match with all kinds of blogger template. The whole code base on CSS so it load fast. And very simple attractive hover effect on its submenu also. Hope this menu  you would like. And it is very easy to add into your blog. You would see that a shadow affect has added bottom of the menu which has added extra feature on it. See the 

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 gadget below header. that's it.

/* The CSS Code for the menu starts here */
 #BloggerSpiceSimpleMenu {
 border-bottom: 5px solid #1A1A1A;
 border-top: 1px solid #1A1A1A;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
 #BloggerSpiceSimpleMenu ul {
 float: left;
 width: 100%;
 #BloggerSpiceSimpleMenu li {
 float: left;
 list-style-type: none;
 #BloggerSpiceSimpleMenu li a {
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 #BloggerSpiceSimpleMenu li a:hover {
 color: #fff;
 #BloggerSpiceSimpleMenu li li a {
 background: none;
 background-color: #111111;
 border: 1px solid #1A1A1A;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 #BloggerSpiceSimpleMenu li li a:hover {
 background: none;
 background-color: #005C91;
 #BloggerSpiceSimpleMenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 #BloggerSpiceSimpleMenu li:hover ul {
 left: auto;

<div id="BloggerSpiceSimpleMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
<li><a href="#">Sub Menu 2</a>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="">Menu 5</a></li>


  • Replace # with your Label URL.
  • Change all Menu 1 , Sub Menu 1 with your own text.

Related Post

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *