A Tutorial How To Add Drop Down Menus in Blogger 2016 – Step By Step

A Tutorial How To Add Drop Down Menus in Blogger 2016 – Step By Step. I’m excited to share this with all bloggers and to all Avon Reps that are looking to add this to their Blogger site. Works perfectly for Simple Template In Blogger.

Drop Down Menus Tutorial 2016

1. First of all, make sure you always back up your template.
2. Works awesome with Simple Template in Blogger
3. View Video to Follow step by step
4. Subscribe to my YouTube Channel
5. Subscribe to my blog @ Subscribe Here >>>
6. Comment and I will get back to you.

Watch the video to follow step by step

  This is the First part CSS CODE TO IMPLEMENT IN THE EDIT HTML TEMPLATE IN BLOGGER.

#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;

Second Part of the code IS TO BE ADDED to THE ADD A GADGET IN LAYOUT IN BLOGGER SELECT HTML / JAVA-SCRIPT AND PASTE THIS CODE IN IT…

 Remember to add your URL IN THE PINK OR # The Highlighted in BLUE is TITLE TAB.

<div id=’cssmenu’>

<ul>

   <li><a href=http://www.beautywithmary247.com/><span>HOME</span></a></li>

   <li class=’has-sub’><a href=’http://www.beautywithmary247.com/p/welcome.html‘><span>Welcome</span></a>

      <ul>

<li><a href=’http://www.beautywithmary247.com/p/blog-page.html‘><span>Contact Us</span></a></li>

<li><a href=’http://www.beautywithmary247.com/2016/03/when-viewing-your-avon-online-brochure.html‘><span>When Viewing Avon Catalog</span></a></li>

<li><a href=’https://www.bloglovin.com/people/maryvivanco-17457455‘><span>Bloglovin’</span></a></li>

<li><a href=’https://twitter.com/mark_trends1‘><span>Twitter</span></a></li>

         <li
class=’last’><a href=’https://www.instagram.com/morethanbeautyneeds/‘><span>Instagram</span></a></li>

      </ul>

<li class=’has-sub’><a href=’http://www.morethanbeautyneeds.com/2016/05/avon-coupon-codes-2016-shop-today.html‘><span>MARK./AVON COUPON CODES 🙂</span></a>

      <ul>

<li><a href=’https://www.avon.com/brochure/?s=ShopBroch&c=repPWP&repid=16278298#/900/201612/en/900‘><span>Shop Mark. 24/7</span></a></li>

<li><a href=’https://goo.gl/b8HceU‘><span>Become An Avon Rep to Sell Beauty</span></a></li>

<li><a href=’#‘><span>bloglovin’</span></a></li>

<li><a href=’#‘><span>twitter</span></a></li>

         <li
class=’last’><a href=’#‘><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a href=’#’><span>google+</span></a></li>

<li><a href=’#’><span>youtube</span></a></li>

<li><a href=’#’><span>bloglovin'</span></a></li>

<li><a href=’#’><span>twitter</span></a></li>

         <li
class=’last’><a href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a href=’#’><span>google+</span></a></li>

<li><a href=’#’><span>youtube</span></a></li>

<li><a href=’#’><span>bloglovin'</span></a></li>

         <li><a
href=’#’><span>twitter</span></a></li>

         <li
class=’last’><a href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a href=’#’><span>google+</span></a></li>

<li><a href=’#’><span>youtube</span></a></li>

<li><a href=’#’><span>bloglovin'</span></a></li>

<li><a href=’3′><span>twitter</span></a></li>

         <li
class=’last’><a href=’#’><span>instagram</span></a></li>

</ul></li>

   <li><a href=’#’><span>resume</span></a></li>

   <li class=’last’><a href=’#’><span>about me</span></a></li>

</li></li></li></li></ul>

</div>

 Or If you want a Mega Subcategories & categories to use this one. (8 Subcategories)

<div id=’cssmenu’>

<ul>

   <li><a
href=’http://www.morethanbeautyneeds.com/‘><span>HOME</span></a></li>

   <li
class=’has-sub’><a
href=’http://www.beautywithmary247.com/p/welcome.html‘><span>Welcome</span></a>

      <ul>

<li><a
href=’http://www.beautywithmary247.com/p/blog-page.html’><span>Contact
Us</span></a></li>

<li><a
href=’http://www.beautywithmary247.com/2016/03/when-viewing-your-avon-online-brochure.html’><span>When
Viewing Avon Catalog</span></a></li>

         <li><a
href=’https://www.bloglovin.com/people/maryvivanco-17457455′><span>Bloglovin'</span></a></li>

<li><a
href=’https://twitter.com/mark_trends1′><span>Twitter</span></a></li>

<li class=’last’><a href=’https://www.instagram.com/morethanbeautyneeds/’><span>Instagram</span></a></li>

</ul>

<li class=’has-sub’><a
href=’http://www.morethanbeautyneeds.com/2016/05/avon-coupon-codes-2016-shop-today.html’><span>Follow
Me</span></a>

      <ul>

<li><a href=’https://www.avon.com/brochure/?s=ShopBroch&c=repPWP&repid=16278298#/900/201612/en/900′><span>Shop
Mark. 24/7</span></a></li>

<li><a href=’https://goo.gl/b8HceU’><span>Become An
Avon Rep to Sell Beauty</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li class=’last’><a
href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a
href=’#’><span>google+</span></a></li>

<li><a
href=’#’><span>youtube</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a href=’#’><span>twitter</span></a></li>

<li class=’last’><a
href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a
href=’#’><span>google+</span></a></li>

<li><a href=’#’><span>youtube</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li class=’last’><a
href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a
href=’#’><span>google+</span></a></li>

<li><a
href=’#’><span>youtube</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li class=’last’><a
href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a
href=’#’><span>google+</span></a></li>

<li><a
href=’#’><span>youtube</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li class=’last’><a
href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a
href=’#’><span>google+</span></a></li>

<li><a
href=’#’><span>youtube</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li class=’last’><a
href=’#’><span>instagram</span></a></li>

</ul>

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

      <ul>

<li><a href=’#’><span>google+</span></a></li>

<li><a
href=’#’><span>youtube</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>bloglovin'</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li><a
href=’#’><span>twitter</span></a></li>

<li class=’last’><a href=’#’><span>instagram</span></a></li>

</ul></li>

   <li><a
href=’#’><span>resume</span></a></li>

   <li
class=’last’><a href=’#’><span>about
me</span></a></li>

</li></li></li></li></li></li></li></ul>

</div>

Don’t forget to subscribe, like, comment, and share the post/savings. 

Mary Vivanco Avon Rep Online

Mary Vivanco Avon Rep Online

Welcome to Your Makeup Beauty Blog – Hello Beautiful!. I’m Your Avon Representative Online. I will be writing about Avon products, opportunity, reviews, makeup, fashion, trends, Tips for Avon Reps, skin care, jewelry, coupon codes, health & wellness and so much more.

Find me on: Web | Twitter | Facebook

💋 I Appreciate You Taking The Time To Leave A Comment 💋

%d bloggers like this: