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

A Tutorial How to add drop down menus in Blogger blog. I’m excited to share this to all bloggers and to all Avon Reps that are looking to add this to their Blogger site. Works perfect for Simple Template In Blogger.

1. First of all make sure you always back up your template.
2. Works awesome in 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 video below post.

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 in 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 YELLOW OR # The Highlighted in dark pink 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 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 video to follow step by step.


Don’t have an Avon lady to shop from?

*Your more than welcome to shop with me online.. 😊

Subscribe To Your Makeup Beauty Blog-Hello #Beautiful!

*Don’t forget to subscribe here, add me to favorite, comment, and share the post 👄.

Create Your AVON Account by Clicking Links Below:

*Create your account w/AVON & registering here.

*Or you may also login with your Facebook account here.

↓ Savings Here ↓

*See all #COUPONCODES here..

*See More #Coupons and #Sale here..

Free shipping on $40. or more no code required. Don’t forget to add your #FREE brochure in cart.

Shop By Categories Below:


*New & Now


*Makeup


*Skin Care


*Bath & Body


*Fragrance


*Jewelry


*Fashion


*Outlet


Avon Orders for Customers Via Phone:


Prefer to Call, Text, or leave a Message to place an AVON order? Call at (904)400-2501 to place an AVON order and have your order shipped directly to your home. Mary Vivanco Avon Rep Online on stand by to place your AVON orders. If I do not answer simply leave a message and I will get back to you during the phone call operating hours listed below. Thank You for your online orders and via phone orders.

Operating phone orders hours: 

*Monday – Saturday

*9am – 8pm

*Sunday’s Closed


Need extra cash?

*Late on bills?

*Going to Collage and need the extra cash?

*Want to make it a long life career?

Do you love makeup, beauty, fashion, skincare? And there is so much more Avon has to offer. Possibilities are endless!!

Learn about opportunity, to be your own #BeautyBoss see all info @ www.beautybossopportunity.com

Follow Me On Google Social Media:

+Mary Vivanco Avon Representative online

+Mary Vivanco Avon Rep Online. Ind. Sls. Rep.

+Mary Vivanco

Follow Blog


*Follow This Blog by clicking here


*Follow my blog with Bloglovin by clicking here


Thank you for your support online. 😉


Shop with confidence our products are magnificent. I love to share the best to my Avon customers online.

Enjoy,


Mary Vivanco Avon Rep Online

Leave a Reply

Your email address will not be published. Required fields are marked *