How to Add Simple Floating Drop Down Menu in Blogger with HTML & CSS

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers.This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed about AdSense Code Converter.
   Now, In this article we will learn - How to Add Simple Floating Drop Down Menu in Blogger with HTML & CSS. Here are the steps for this: 

Step - 1. Login into your blogger account & select the blog into which you want to add a floating Drop Down Menu.

Step - 2. Now Go to Layout Section & click to add "Add a Gadget" tab. Now Click on the "HTML / JavaScript" widget to add.

Step - 3. Now copy the code given below & paste into the HTML / JavaScript widget >> "Click Save" & you are done.

Code :

<style>#sbfixed {position:fixed;top:-10px;left:0;width:100%;height:25px;z-index:999;}#sbfixedinner{text-

align:center;background:transparent;height:25px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner

{margin-right:-113px;voice-family: ""}""; voice-family:inherit; }* html #sbfixedinner{margin-right:2px;}* html #sbfixed {position:absolute;}#sbtop-wrapper

{background:black;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba

(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid rgb(72, 161, 250);}#sbtopbar{width:1050px;height:15px;margin:0 auto}#sbtop{width:100%}

#sbtop,#sbtop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#sbtop a{display:block;text-decoration:none;font:bold 15px Arial;text-

transform:none;color:white;border-right:1px solid #FFFFFF;border-left:1px solid #FFFFFF;padding:7px 7px 7px}#sbtop a.arrow{background-image:url

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYuXlztSJQGPH0FM5BLjOS-jih-PXPrYO52VLGNgdfIZqTWJI5kyR2azn_cehm_gqBhwc3AH91xwxmhLeGXoV7q6RIwZCRJepRHzPMRWcLK3_6v53DmnvglXKstVSl4buyPT0yD29vTA/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right 

center;padding:7px 7px 7px 2px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:170px}#sbtop ul li a{text-

align:left;color:#0000FF;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 2px}#sbtop li ul{z-

index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba

(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#222;color:#fff}#sbtop li:hover ul,#sbtop li.hvr ul

{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:0px 

solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!

important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:12px;text-

transform:uppercase;text-shadow: 1px 2px 2px #000}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color:#f1c822}</style>

<div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar">

<ul id="sbtop">

<li><a href='#'>Home Page</a></li>

<li><a href='#'>DropDown 1</a>

<ul>

<li><a href='#'>DropDown 1.1</a></li>

<li><a href='#'>DropDown 1.2</a></li></ul></li>
<li><a href='#'>DropDown 2</a></li>

<li><a href='#'>DropDown 3</a></li>

<li><a href='#'>DropDown 4</a>

<ul>

<li><a href='#'>c</a></li>

<li><a href='#'>DropDown 4.2</a></li>

<li><a href='#'>DropDown 4.3</a></li>

<li><a href='#'>DropDown 4.4</a></li>

<li><a href='#'>DropDown 4.5</a></li>

</ul>

</li>

<li><a href='#'>DropDown 5</a></li>

<li><a href='#'>DropDown 6</a></li>

<li><a href='#'>DropDown 7</a></li>

<li><a href='#'>DropDown 8</a></li>

<li><a href='#'>DropDown 9</a></li>

</ul></div></div></div></div>

Now you can visit you blog. You will see a Floating Drop Down Menu bar on the top. You can customize this drop Down menu as shown below:

1. Replace # with your page or label links.
2. Replace DropDown 1 by the text you want to display.
3. Replace DropDown 1.1 by Menu Text you want to Add in Drop Down.

Keep Learning & sharing with your friends. Any Question ???. Ask in the Comments. For latest blogs, visit - Wide Info blog