Add Drop Down Menu

Here we will be creating Dropdown menu using Blogger Gadget.
Following Steps are followed.

1.  Add HTML/JavaScript Gadget.
2.  Add <UL and <LI Tags as required.
3.  Add CSS Code to alignment and assign colours to tab.
4.  Define Array for Captions and Hyperlinks.
5.  Define JavaScript to load Captions and Hyperlink.
6. Once the Code is ready and working then  Captions, Hyperlinks and
      colour of Tab need to be changed at one place.

1.  Add HTML/JavaScript Gadget.


2. Coding

<script>
var _menuoption=["bing","yahoo","google","Games","Android games","Desktop Games","Foot Ball Games","g","h","i","j","k","l","m"];
var _link=["http://www.bing.com","http://www.yahoo.com","http://www.google.com","","http://www.google.co.in/#q=android+games","http://www.google.co.in/#q=desktop+games"]
var _backgroundcolor="red";
var _color="white";
</script>
<ul id="mainmenu1">
  <li id="0"><a href="#"></a>a</li>
  <li id="1"><a href="#/"></a>b</li>
  <li id="2"><a href="#/"></a>c</li>
  <li id="3">d
    <ul>
      <li id="4"><a href="#"></a>e</li>
      <li id="5"><a href="#"></a>f</li>
      <li id="6"><a href="#"></a>g</li>
    </ul>
  </li>
<li id="7">h
    <ul>
      <li id="8"><a href="#"></a>i</li>
      <li id="9"><a href="#"></a>j</li>
    </ul>
  </li>
  <li id="10"><a href="#"></a>k</li>
  <li id="11"><a href="#"></a>l</li>
</ul>

<ul id="mainmenu1">
  <li id="0"><a href="#"></a></li>
  <li id="1"><a href="#/"></a></li>
  <li id="2"><a href="#/"></a></li>
  <li id="3">
    <ul>
      <li id="4"><a href="#"></a></li>
      <li id="5"><a href="#"></a></li>
      <li id="6"><a href="#"></a></li>
    </ul>
  </li>
<li id="7">
    <ul>
      <li id="8"><a href="#"></a></li>
      <li id="9"><a href="#"></a></li>
    </ul>
  </li>
  <li id="10"><a href="#"></a></li>
  <li id="11"><a href="#"></a></li>
</ul>
<style>
.tabs-inner .widget ul#mainmenu1 {
  text-align: left;
  display: inline;
  margin: 10;
  padding: 15px ;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#mainmenu1 li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  float:none;
  cursor: pointer;
}
.tabs-inner .widget ul#mainmenu1 li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#mainmenu1 li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
}
.tabs-inner .widget ul#mainmenu1 li ul li {
  display: block;
}
.tabs-inner .widget ul#mainmenu1 li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
background:blue;
}
</style>
<script type="text/javascript">
var x=document.getElementsByTagName("LI");
for (var i=0;i<x.length;i++)
{
x[i].innerHTML=x[i].innerHTML+_menuoption[i];
x[i].style.background=_backgroundcolor;
x[i].style.color=_color;
x[i].onclick=
function fn()
{
if (_link[this.id].length != 0) {
location.href=_link[this.id];
}
};}

</script>

3. Paste the Code


4. Test and View Brower.


5. One can change the following code to redefine Menu for Captions , Hyperlink and colour or tabs.
<script>
var _menuoption=["bing","yahoo","google","Games","Android games","Desktop Games","Foot Ball Games","g","h","i","j","k","l","m"];
var _link=["http://www.bing.com","http://www.yahoo.com","http://www.google.com","","http://www.google.co.in/#q=android+games","http://www.google.co.in/#q=desktop+games"]
var _backgroundcolor="red";
var _color="white";
</script>