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.

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.
7. Watch the video below the post.

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

  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>

Watch the video to follow step by step.

Current AVON Coupon Codes / Promos

Additional savings just for you

  1. Make sure you add your FREE AVON BROCHURE
  2. Save even more w/EBATES activate your EBATES account and earn cash-back while shopping online see it here.

Check out your sales & promos below..

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

Mary Vivanco Avon Rep Online

Follow:
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

💋 Leave a Reply 💋