How to add a drop down menu in blogger

Hello here is a tutorial on how to make a custom drop down menu in blogger!

 or 

1. Back up your template.

Before we do anything, you need to back up your template. Since we’re editing code it’s really important that you back it up beforehand in case you make any mistakes and need to revert them. 

Go to template ---> backup/restore, ---> download full template.

2. Add css coding 

Once you have your template backed up, (you should still be on the template tab I circled in the image above) click on the button to “Edit HTML”. Make sure you are scrolled all the way up and look for the bit of code near the top that looks like this:<b:skin>…</b:skin> 

Click on the black arrow next to  text that says <b:skin>…</b:skin> to expand it. Make sure you scroll down until you see the next black arrow, all the way down until you find the</b:skin> tag again. 

Make a new line BEFORE the </b:skin> line. This is where we’re going to put our first bit of code, just stop before the pink line. SAVE. If you would like to change colors like I did, please copy and paste the below code into word pad or any word document application before pasting it into your css and refer to step 3.

#cssmenu {

  border: none;

  border: 0px;

  margin: 0px;

  padding: 0px;

  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;

  font-size: 14px;

  font-weight: bold;

  width: auto;

}

#cssmenu ul {

  background: #333333;

  height: 35px;

  list-style: none;

  margin: 0;

  padding: 0;

}

#cssmenu li {

  float: left;

  padding: 0px;

}

#cssmenu li a {

  background: #333333 url('seperator.png') bottom right no-repeat;

  display: block;

  font-weight: normal;

  line-height: 35px;

  margin: 0px;

  padding: 0px 25px;

  text-align: center;

  text-decoration: none;

}

#cssmenu > ul > li > a {

  color: #cccccc;

}

#cssmenu ul ul a {

  color: #cccccc;

}

#cssmenu li > a:hover,

#cssmenu ul li:hover > a {

  background: #777777 url('hover.png') bottom center no-repeat;

  color: #FFFFFF;

  text-decoration: none;

}

#cssmenu li ul {

  background: #333333;

  display: none;

  height: auto;

  padding: 0px;

  margin: 0px;

  border: 0px;

  position: absolute;

  width: 225px;

  z-index: 200;

  /*top:1em;

/*left:0;*/

}

#cssmenu li:hover ul {

  display: block;

}

#cssmenu li li {

  background: url('sub_sep.png') bottom left no-repeat;

  display: block;

  float: none;

  margin: 0px;

  padding: 0px;

  width: 225px;

}

#cssmenu li:hover li a {

  background: none;

}

#cssmenu li ul a {

  display: block;

  height: 35px;

  font-size: 12px;

  font-style: normal;

  margin: 0px;

  padding: 0px 10px 0px 15px;

  text-align: left;

}

#cssmenu li ul a:hover,

#cssmenu li ul li:hover > a {

  background: #777777 url('hover_sub.png') center left no-repeat;

  border: 0px;

  color: #FFFFFF;

  text-decoration: none;

}

#cssmenu p {

  clear: left;

_________________________________________________________________________________

3. Colors

If you want to change your menu colors, copy and paste the code above into a word pad or word document (i use my google drive word application) refer to the codes & color chart link below :)

Change ALL the default color codes you see in the html below (I color coded them to make it easier for you to change them) with new ones from here: COLOR CHART LINK HERE

Default menu colors

MENU BACKGROUND:  #333333        (dark grey)

MENU HOVER:              #7777777      (medium grey)

MAIN TEXT:                 #cccccc        (light grey)

HOVER TEXT:               #FFFFFF      (white)

Copy and paste the cc from the word into your css  BEFORE the </b:skin> line. Save. If you think you messed up, you can just restore your template.

_________________________________________________________________________________

4.HTML Coding

In the next step we will be adding html to your site. Go to Layout--->add a gadget--->HTML/ Java script. Take the code below the pink line, copy and paste it into the new window that will pop up. What made it easier for me, was to expand the window so each code <.....> stays on the same line. Change it to your links and titles.As you can see in my follow me line I have #,meaning that the link will not b clickable. If you would like to add more selections just make sure that you have this code before the last item.  <li class='last'> (I will explain more in the video). Save.

menu name

menu destination link

dropdown menu name

dropdown menu link/ destination

_________________________________________________________________________________

<div id='cssmenu'>

<ul>

   <li><a href='http://biggereyesmedia.blogspot.com/'><span>home</span></a></li>

   <li class='has-sub'><a href='#'><span>follow me :)</span></a>

      <ul>

         <li><a href='google.com/+mariyamokshina'><span>google+</span></a></li>

         <li><a href='http://www.youtube.com/biggereyes1'><span>youtube</span></a></li>

         <li><a href='http://www.bloglovin.com/blog/11180785/'><span>bloglovin'</span></a></li>

         <li><a href='https://twitter.com/mariyamokshina'><span>twitter</span></a></li>

         <li class='last'><a href='http://instagram.com/heartcam'><span>instagram</span></a></li>

      </ul>

   </li>

   <li><a href='http://biggereyesmedia.blogspot.com/p/resume.html'><span>resume</span></a></li>

   <li class='last'><a href='http://biggereyesmedia.blogspot.com/p/about-contact-me.html'><span>about me</span></a></li>

</ul>

</div>

_________________________________________________________________________________

5. Place you new menu and remove old one.
Go to your layout  and  drag your very top gadget underneath your your header.  Click edit on your old menu and remove it. Click "save arrangement"

p.s. If you like the combo of colors on my page copy and paste this into your css instead.

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #ffbdc6;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #ffbdc6 url('seperator.png') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #FFFFFF;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #cccccc url('hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #555555;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #cccccc url('hover_sub.png') center left no-repeat;
  border: 0px;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}

_________________________________________________________________________________

I hope this helps! xoxox