Blogger Dropdown menu made simple in three steps

In order to add drop down menu to your blogger site here are the steps to do that.

we have an options to modify the and add html and CSS code to blogger site.

Login to your blogger site and go to your blogger Layout > Header > Add a Gadget > HTML/Java Script.

Click on "Add a Gadget" As shown in above screenshot.

Click on HTML / Java Script as shown in above screenshot.

Now Modify the Below Mentioned code and paste in the Script window

/* Code Start Here arkit Solutions http://www/arkit.co.in */
<ul id="arkit">
<li>
Home
<ul>
  <li><a href="#">Blog Home</a></li>
  <li><a href="http://arkit.co.in/about-us/">About Us</a></li>
   <li><a href="http://www.arkit.co.in/fanfarez">Entertainment</a></li>
</ul>
</li>
<li>
    Linux Tutorials
    <ul>
<li><a href="http://ark-library.blogspot.in/">RHEL5 Book</a></li>
    <li><a href="http://rhel7forfreshers.blogspot.in/">RHEL7 Tutorial</a></li>
    <li><a href="http://rhcesyllabus.blogspot.in/">RHEL7 Book</a></li>
<li><a href="http://linuxhelpfulldocs.blogspot.in/">HelpDocs</a></li>
    </ul>
  </li>
<li>
    SAN and NAS
    <ul>
<li><a href="http://netappnotesark.blogspot.in/">Netapp SAN Tutorial</a></li>
    <li><a href="http://arkit.co.in/category/emc/">EMC SAN Tutorial</a></li>
    <li><a href="http://arkit.co.in/category/ibm/">IBM SAN Tutorial</a></li>
</ul>
</li>
<li>
    InterView Related
    <ul>
<li><a href="http://ark-library.blogspot.in/2015/08/how-to-prepare-for-interview.html">PrepareFor Interview</a>
<li><a href="http://ark-library.blogspot.in/2015/08/tell-me-about-yourself-sample.html">TellAboutYou</a>
<li><a href="http://redhatlinuxrhce.blogspot.in/">Linux InterView Q and A</a></li>
    <li><a href="http://arkit.co.in/category/interview-questions-and-answers/">Questions and Answers</a></li>
    </ul>
</li>
<li>
    Monitoring Tools
    <ul>
<li><a href="http://nagiosmonitoringtool.blogspot.in/">Nagios Tutotial</a></li>
    <li><a href="http://arkit.co.in/category/nagios/">Nagios Videos</a></li>
    </ul>
</li>
<li>
    Online Trainings
    <ul>
      <li><a href="http://arkit.co.in/linux-online-training-course">Linux RHCE and RHCSA</a></li>
      <li><a href="http://arkit.co.in/netapp-course-content/">Netapp NCSA and NCIE</a></li>
      <li><a href="http://arkit.co.in/about-us/">Monitoring Tool</a></li>
    </ul>
  </li>
<li>
    Video Tutorials
    <ul>
<li><a href="http://videos4tech.blogspot.in/">Linux Videos</a></li>
    <li><a href="http://bit.ly/arkit-tech">TechTutorials</a></li>
    <li><a href="http://bit.ly/1otzsaC">YoutubeVideos</a></li>
    </ul>
  </li>
<li>
    Follow Us
    <ul> 
<li><a href="http://arkit.co.in/about-us/">Contact Us</a></li>
    <li><a href="https://www.facebook.com/groups/arkitcoin/">FaceBook Group</a></li>
<li><a href="https://plus.google.com/u/0/+RedhatEnterpriseLinuxStepbyStepGuide/posts">Google Plus</a></li>
    <li><a href="https://www.facebook.com/aravikumar489">FaceBook Profile</a></li>
    <li><a href="http://bit.ly/1otzsaC">Youtube Channel</a></li>
<li><a href="https://www.reddit.com/me/m/techtutorial">Reddit</a></li>
<li><a href="https://twitter.com/aravikumar48">Twitter</a></li>
</ul>
 </li>
 <li>
    Follow Us1
    <ul>
  <li><a href="https://www.tumblr.com/blog/techtutorial-ark">Tumblr</a></li>
<li><a href="https://in.pinterest.com/aravikumar48/">Pinterest</a></li>
<li><a href="https://feedburner.google.com/fb/a/mailverify?uri=arkit">Follow US</a></li>
    </ul>
 </li>
</ul>

/* Code END Here */

Modify the Code as per your requirements and paste in the Script window.
Click on Save

Click on Template and Customise button As shown in above screenshot

Click on Advanced > Add CSS button as shown in above screenshot then Paste the below mentioned CSS code as it is.

Note: Do not Modify

#### Code START ############

.tabs-inner .widget ul#arkit {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#arkit li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #04B486; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#arkit li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#arkit li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */ 
}
.tabs-inner .widget ul#arkit li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */ 
}
.tabs-inner .widget ul#arkit li ul {
  z-index:1000; 
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#arkit li ul li { 
  background: #555; /* background colour of the sub menu items */
  display: block; 
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#arkit li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#arkit li ul li:hover { 
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#arkit li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

###### Code END ##########


Thats it Now Go to your blog and see you will see dropdown menu.

Please comment if this article is informative to you..!!