Simple CSS3 Dropdown Menu for Blogger BlogSpot

Simple CSS3 Dropdown Menu for Blogger BlogSpot

0
data:blog.title
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.


<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.
Simple CSS3 Dropdown Menu for Blogger BlogSpot
4 Stars stars - " Simple CSS3 Dropdown Menu for Blogger BlogSpot " Hi this is very simple CSS3 coded Deopdown navigation menu. It will work fine and match with a...

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

Name

Email *

Message *