Create a Drop Down Cool+ Stylish Menu In Blogger

Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I already shared a list and now you need to learn how to create a drop down menu in a navigation. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!

Gadget Demo

[[ To Veiw This Click The "Gadged Demo" Button Given above ]]

How To Create a Drop Down Menu?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:

1. Go To Blogger > Design > Edit HTML
2. Then Find This 

]]></b:skin>

   3. Copy this Code and Post Above that

/* Dropdown Menu */
ul.menu{
  list-style-type:none; 
  margin:0 0 20px 0; 
  padding:0;
  float:left
}

ul.menu li{
  display:block; 
  height:30px; 
  float:left;
  position:relative;
  margin-right:15px; 
  padding:0;
}

ul.menu li a{ 
  display:block;
  float:left;
  text-decoration:none;
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  padding:5px 0;
  line-height:18px; 
}

ul.menu li a span{
  font-weight:normal;
  padding-left:0
}

ul.menu li.drop a{
  padding-right:7px
}

ul.menu li a:hover{
  background:none;
}

ul.menu li.drop:hover li{
  border:none
}

ul.menu li.drop span.toggle{
  display:block;
  float:left; 
  width:18px;
  height:26px; 
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicRctsIrMt-kHmeMGh2JjCVdAlfsxRxG0ynVqLGZZX-bTaUqKb_yGNPB5OVBzYjsDen2l0ilFkiduHR5iWnV0U5TUnJ8e2KSMoks1v5i537zHbrQHcYGSi-Kpi6_4fGhDMsII54zNsFd4/s0/toggle_bg.png) no-repeat 0 -18px; 
  padding:0;
  margin:0
}

ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle{ 
  background-position:0px 5px
}

ul.menu li.drop:hover ul{ 
  display:block;  
  z-index:1;
  padding:6px 0;
}

ul.menu li ul{ 
  display:none; 
  position:absolute;
  width:170px !important;
  top:30px;
  left:0;
  list-style-type:none;
  margin:0;
  padding:0;
  background:#e4e4e1;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
}

ul.menu li ul li{ 
  float:none;
  height:auto;
  margin:0;
  padding:0;
  border:none
}

ul.menu li ul li a{ 
  background:#fff;
  float:none;
  display:block;
  font-size:13px;
  height:auto;
  margin:0 5px 1px 5px;
  padding:5px 7px;
  font-weight:bold;
  text-transform:none;
}

ul.menu li:hover ul{
  border:none;
}

ul.menu li:hover ul *{
  color:#444;
}

ul.menu li ul li:hover *{
  color:#2b74a9;
}

ul.menu li ul li a:hover {
  background:#fff !important;
}
4. Save The templete .
5.Go To Blogger > Design >Edit Html >Expand Widgets
    6.Now find 
<div class='columns-inner'>       OR<div id='main-wrapper'>
   7.Paste Above this Code :

   

<ul class='menu'>

      <li class='drop'>
         <a href='/'>DropDown 1</a>
           <span class='toggle'/>
              <ul>
                 <li><a href='#LINK_HERE'>Child Menu 1.1</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 1.2</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 1.3</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 1.4</a></li>
              </ul>
      </li>

      <li class='drop'>
         <a href='/'>DropDown 2</a>
           <span class='toggle'/>
              <ul>
                 <li><a href='#LINK_HERE'>Child Menu 2.1</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 2.2</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 2.3</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 2.4</a></li>
              </ul>
      </li>

      <li class='drop'>
         <a href='/'>DropDown 3</a>
           <span class='toggle'/>
              <ul>
                 <li><a href='#LINK_HERE'>Child Menu 3.1</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 3.2</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 3.3</a></li>
                 <li><a href='#LINK_HERE'>Child Menu 3.4</a></li>
              </ul>
      </li>

      <li class='drop'>
         <a href='/'>DropDown 4</a>
           <span class='toggle'/>
              <ul>
                 <li><a href='#LINK_HERE'>Child Menu Menu 4.1</a></li>
                 <li><a href='#LINK_HERE'>Child Menu Menu 4.2</a></li>
                 <li><a href='#LINK_HERE'>Child Menu Menu 4.3</a></li>
                 <li><a href='#LINK_HERE'>Child Menu Menu 4.4</a></li>
              </ul>
      </li>

   </ul>
Just make changes In this
Change             - To The menu Tittle Name
Change             - To The menu Sub Tittle Name
Change             - To The menu Tittle link
Change             - To The menu Sub Tittle Link
Hope u guys will Enjoy it :)