Create simple Drop down Menu Using CSS.
This
tutorial about how to add simple drop down menu using CSS code. Now I am going to
show you that adding procedure of simple drop down menu in blogger by using css. There
is no necessity to add JavaScript for this tutorial. In fact using JavaScript
build the site little bit slower than using css codes. For that reason, there is
no need to run the JavaScript.
It’s an easy
process to add this code into your blogger blogs. There is no need to keep back
up your templates since this does not change the blogger css templates code. Let’s
go the step by step procedure of drop down menu tutorial.
Step 1: At
first Login into your Blogger dashboard >> layouts then click it and find
the
Html/JavaScript option.
Step 2: Now
copy the following code.
<div id='absnavbar'>
<ul
id='absnav'><li> <a href='#'>Company</a> </li>
<li> <a
href='#'>Portfolio</a></li>
<li> <a
href='#'>About</a> </li>
<li> <a
href='#'>Contact</a>
<ul>
<li><a href='#'>sub_contact 1</a></li>
<li><a
href='#'>sub_contact 2</a></li>
<li><a
href='#'>sub_contact 3</a></li>
</ul>
</li>
</ul>
</div>
Step 3: Just paste the above code into Html/JavaScript
box.
Step 4: Then
save it.
Now add the CSS code for configuring or giving the style for that HTML code.
Step 5: Go
to the layout at the top right corner of layout you will see the template
designer link, now click it.
Step 6:
After then click on advance and select the add css link in the middle of these
list, then paste the below code in this box.
/*-----Drop Down Menu for Blogger by knowledgeinfi
----*/
#absnavbar { background: #333333; width: 960px; color: #ffffff; margin: 0px; padding: 0px; position: relative; border-top:0px solid #323232; height:38px;}
#absnav { margin: 0px; padding: 0px; } #absnav ul { float: left; list-style: none; margin: 0px; padding: 0px; } #absnav li { list-style: none; margin: 0px; padding: 0px; border-left:1px solid #333; border-right:1px solid #333; height:38px; } #absnav li a, #absnav
li a:link, #absnav li a:visited {
color: #eeeeee; display:
block; font:normal 14px Helvetica,
sans-serif; margin: 0; padding: 10px 13px 11px 13px; text-decoration: none; } #absnav li a:hover, #absnav li
a:active { background: #ff0100; color: #ffffff; display: block; text-decoration: none; margin: 0px; padding: 10px 13px 11px 13px; }#absnav li { float: left; padding: 0px; } #absnav li ul { z-index: 9999; position: absolute; left: -998em; height: auto; width: 160px; margin: 0px; padding: 0px; } #absnav li ul a { width: 142px; } #absnav li ul ul { margin: -25px 0 0 161px; } #absnav
li:hover ul ul, #absnav li:hover ul ul ul, #absnav li.sfhover ul ul, #absnav
li.sfhover ul ul ul { left: -998em; }
#absnav li:hover ul, #absnav li li:hover ul, #absnav li li li:hover ul, #absnav
li.sfhover ul, #absnav li li.sfhover ul, #absnav li li li.sfhover ul { left: auto; } #absnav li:hover, #absnav
li.sfhover { position: static;
}#absnav li li a, #absnav li li a:link, #absnav li li a:visited { background: #ff0100; width: 120px; color: #ffffff; display: block; font:normal 14px Helvetica,
sans-serif; margin: 0; padding: 10px 13px 11px 13px; text-decoration: none; z-index:9999;
border-bottom:1px dotted #444444; }
#absnav li li a:hover, #absnavli li a:active { background: #151414; color: #ffffff; display: block; margin: 0px; padding: 10px 13px 11px 13px; text-decoration: none; }
Step 7: Now
click on apply now button.
Now you have
successfully done this tutorial. Thanks for stay with us.