Simple CSS3 Dropdown Menu for Blogger BlogSpot
Simple CSS3 Dropdown Menu for Blogger BlogSpot
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
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.
<style>
/* The CSS Code for the menu starts here bloggerspice.com */
#BloggerSpiceSimpleMenu {
width:800px;
background:#005C91;
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;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}
#BloggerSpiceSimpleMenu ul {
float: left;
width: 100%;
}
#BloggerSpiceSimpleMenu li {
float: left;
list-style-type: none;
}
#BloggerSpiceSimpleMenu li a {
background:#005C91;
color: #fff;
display: block;
font-size: 14px;
padding: 5px 17px 5px 15px;
position: relative;
text-decoration: none;
}
#BloggerSpiceSimpleMenu li a:hover {
background:#000000;
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;
}
</style>
<div id="BloggerSpiceSimpleMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
<ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>
<ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</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="http://www.bloggerspice.com/">Menu 5</a></li>
</div>
Customization
- Replace # with your Label URL.
- Change all Menu 1 , Sub Menu 1 with your own text.
Post a Comment