Add Super Cool Black CSS3 Drop Down Menu to blogger blog

  Previously i wrote a tutorial on add Css3 Navigation Menu to blogger blog. it is always fun to learn and explore the new standards introduced for CSS. With growing Development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. It is compatible with all major browsers like Firefox, Chrome and safari. Today in this post i will share with you great beautiful and ready to use CSS3 Dropdown Menu. This Navigation is Simple Cool & The main Part is that it doesn’t  need any JQUERY or JavaScript. it uses  not  image or scripts at all! We can build an awesome CSS3 animated Drop Down Navigation Menu some of these cool CSS3 Features. So Lets Start The Tutorial.

 

Add It To Blogger Blog

 

Note:- Make Sure Before Editing Template Make a Template

1. Go To your Blogger Dashboard>> Template>> Click  Edit HTML

2. Search for </b:skin>. Click the black arrow to expand the code.

 

 

3. Paste the Following Style just above </b:skin>

#Black_menu {
background:#333333;
width: 100%;
margin:0px;
padding:0px;
font-size: 13px; 
font-family:arial;
font-weight:bold;
}

#Black_menu ul {
height:41px;
list-style:none;
margin:0;
padding:0px;
}

#Black_menu li{
float:left;
padding:0px;
}

#Black_menu li a {
background:#333;
color:#cccccc;
display:block;
font-weight:bold;
line-height:41px;
border-right: 1px solid #444444;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

#Black_menu li a:hover, #Black_menu ul li:hover a {
background: #444;
color:#FFFFFF;
text-decoration:none;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

#Black_menu li ul {
background:#333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}

#Black_menu li:hover ul {
display:block;
}

#Black_menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

#Black_menu li:hover li a {
background:none;
}

#Black_menu li ul a {
display:block;
height:41px;
font-size:13px;
font-style:normal;
border-bottom: 1px solid #444;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

#Black_menu li ul a:hover, #Black_menu li ul li:hover a {
background:#444; 
border:0px;
color:#FFF;
border-bottom: 1px solid #444;
text-decoration:none;
margin-left: 5px;
padding:0px 10px 0px 15px;
}
 

4. and paste the following HTML Code where you want to show Navigation menu.

<div id='Black_menu'>
<ul>

<li class='active '><a href='#'><span>Home</span></a></li>

<li class='sub '><a href='#'><span>Blogger</span></a>

<ul>

<li><a href='#'><span>SEO</span></a></li>

<li><a href='#'><span>Template</span></a></li>

<li><a href='#'><span>Widgets</span></a></li>

<li><a href='#'><span>Plugins</span></a></li>

</ul>

</li>

<li><a href='#'><span>Applicatoin</span></a>

<ul>

<li><a href='#'><span>HTML Encoder</span></a></li>

<li><a href='#'><span>HTML Editor</span></a></li>

</ul></li>

<li><a href='#'><span>Tools &#187</span></a>

<ul>

<li><a href='#'><span>Online HTML Editor</span></a></li>

<li><a href='#'><span>Color Code</span></a></li>

<li><a href='#'><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href='#'><span>Color Code</span></a></li>

</ul>

 </div>

The widget is extremely easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign (#) with respective links.

and you are done…!!!! Don’t Forget To check our previous Menus.

For any further help please feel free to post your queries in the comment box below. Its Very Handy, Light weight and Professional navigation Which you all can use to get rid of scripts and bulky menus that uses CSS3 and takes a lot of time to load. Thanks For Reading our Post..