Skip to main content

Dropdown Menu for Blogger

by

It is really important and essential to give an abstract view of your blog to your blog readers. This not only increases your blog traffic but also shows your sophistication level. Now in order to do that, you have to implement various widgets in your blog; among which navigation menu is an essential one. But among all of the different types of menus that can be used on a website, a dropdown menu benefits the most. A dropdown menu is able to organize all contents into smaller sub-categories that are easy to navigate. By using a dropdown menu with a large list of categories and sub-categories, the surfing experience of your visitors can be improved.


Features

  • Very simple CSS code.
  • Clear indication of mouse over.
  • Easily editable.
  • Some of these are multilevel.
  • Compatible with all modern browsers.

All right, let's proceed.

Before you make any changes, it's recommended to backup your blog template in case something goes wrong.
  1. Go to 'Blogger' dashboard.
  2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' form the drop-down menu list.
  3. Click 'Add a Gadget' link as shown in the fig below. A new window with all available gadgets will appear.
  4. Scroll down and click on 'HTML/Javascript' gadget or the '+' icon close to 'HTML/Javascript' gadget.
    Add HTML/Javascript widget
  5. Select one menu from these navigation menus, copy (Ctrl+C) the following code and paste (Ctrl+V) it inside the content area of 'HTML/Javascript' widget. Leave the title empty.

    6. Dropdown Menu #1
    Screenshot
    Dropdown Menu #1
    Source
    <style type="text/css">
.menu {
  margin: 0;
  padding: 0;
  font: normal normal 16px Droid Serif;
  float: left;
  clear: both;
  white-space: nowrap;
  width: 100%;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #343434;
}
.menu li {
  list-style: none;
}
.menu ul#navig {
  float: left;
  clear: both;
  display: block;
  border-bottom: 2px solid #b7b7b7;
  width: 100%;
  overflow: visible;
}
.menu li.hori {
  padding: 0.4em 1.5em 0.7em;
  float: left;
  position: relative;
  border-top: 0.3em solid transparent;
}
.menu li.hori:hover {
  border-top: 0.3em solid #b7b7b7;
}
.menu ul.sub {
  display: none;
  z-index: 9998;
  position: absolute;
  left: 0;
  top: 100%;
}
.menu li.hori:hover ul.sub {
  display: block;
}
.menu li.hori li {
  display: block;
  float: none;
  z-index: 9999;
  padding: 0.8em 5em 0.8em 0.8em;
  border-left: 0.3em solid transparent;
}
.menu li.hori li:hover {
  border-left: 0.3em solid #b7b7b7;
}
.menu a {
  color: #eee;
  display: block;
  text-decoration: none;
  line-height: 1em;
}
.menu li.hori>a {
  text-align: center;
}
.menu ul.sub a {
  font-size: 0.75em;
  text-align: left;
}
.menu li:hover>a, .menu1 ul.sub li:hover a {
  color: #ff0;
  text-decoration: none;
}
</style>

<div class="menu">
  <ul id="navig">
    <li class="hori"><a href="#" >Home</a></li>
    <li class="hori"><a href="#" >Softwares</a>
      <ul class="sub">
        <li><a href="#">Windows</a></li>
        <li><a href="#">Linux</a></li>
      </ul>
    </li>
    <li class="hori"><a href="#" >Contacts</a></li>
  </ul>
</div>

    Dropdown Menu #2
    Screenshot
    Dropdown Menu #2
    Source
    <style type="text/css">
.menu {
  margin: 0;
  padding: 0;
  font: normal normal 16px Droid Serif;
  float: left;
  clear: both;
  white-space: nowrap;
  width: 100%;
}
.menu ul {
  list-style: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #111;
  background-image: -moz-linear-gradient(#444, #111);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
  background-image: -webkit-linear-gradient(#444, #111);
  background-image: -o-linear-gradient(#444, #111);
  background-image: -ms-linear-gradient(#444, #111);
  background-image: linear-gradient(#444, #111);
}
.menu li {
  list-style: none;
}
.menu ul#navig {
  width: 100%;
  overflow: visible;
  padding: 0.5em 0.2em;
  float: left;
  clear: both;
  display: block;
  border: 1px solid #232323;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 1px #777;
  -moz-box-shadow: 0 1px 1px #777;
  -ms-box-shadow: 0 1px 1px #777;
  box-shadow: 0 1px 1px #777;
}
.menu li.hori {
  margin: 0 10px;
  padding: 0.5em 1em;
  float: left;
  position: relative;
  border-right: 1px solid #222;
  -moz-box-shadow: 1px 0 0 #444;
  -webkit-box-shadow: 1px 0 0 #444;
  -ms-box-shadow: 0 1px 1px #777;
  box-shadow: 1px 0 0 #444;
}
.menu li.hori:last-child {
  border-right: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.menu ul.sub {
  position: absolute;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -moz-box-shadow: 0 -1px rgba(255, 255, 255, .3);
  -webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
  -ms-box-shadow: 0 -1px rgba(255, 255, 255, .3);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.menu ul.sub li {
  display: block;
  float: none;
  z-index: 9999;
  margin: 0;
  padding: 18px 25px 18px 15px;
  -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
.menu ul.sub li:first-child {
  border-radius: 3px 3px 0 0;
  position: relative;
}
.menu2 ul.sub li:last-child {
  border-radius: 0 0 3px 3px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.menu2 ul.sub li:hover {
  background-color: #2580a2;
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#004e6c), to(#00b1f4));
  background-image: -webkit-linear-gradient(bottom, #004e6c, #00b1f4);
  background-image: -moz-linear-gradient(bottom, #004e6c, #00b1f4);
  background-image: -ms-linear-gradient(bottom, #004e6c, #00b1f4);
  background-image: -o-linear-gradient(bottom, #004e6c, #00b1f4);
}
.menu ul.one {
  left: 0;
  top: 160%;
}
.menu li.hori:hover ul.one {
  opacity: 1;
  visibility: visible;
  top: 100%;
  overflow: visible;
}
.menu ul.one>li:first-child:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  left: 20%;
  top: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #444;
}
.menu ul.one>li:first-child:hover:before {
  border-bottom: 6px solid #00b1f4;
}
.menu ul.two {
  left: 130%;
  bottom: -20px;
}
.menu ul.one>li:hover ul.two {
  opacity: 1;
  visibility: visible;
  left: 95%;
  overflow: visible;
}
.menu ul.two li:first-child:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  left: -6px;
  top: 12px;
  border-right: 6px solid #444;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.menu ul.two li:first-child:hover:before {
  border-right: 6px solid #0092b9;
}
.menu a {
  color: #888;
  display: block;
  text-decoration: none;
  line-height: 1em;
}
.menu li.hori>a {
  text-align: center;
  text-transform: uppercase;
}
.menu ul.sub a {
  font-size: 0.9em;
  font-style: normal;
}
.menu li:hover a {
  text-decoration: none;
}
.menu ul li.hori:hover>a, .menu ul.one>li:hover>a, .menu ul.two li:hover a {
  color: #fff;
  text-decoration: none;
}
</style>

<div class="menu">
  <ul id="navig">
    <li class="hori"><a href="#">Home</a></li>
    <li class="hori"><a href="#">Music</a>
      <ul class="sub one">
        <li><a href="#">English</a></li>
        <li><a href="#">Hindi</a>
          <ul class="sub two">
            <li><a href="#">Album</a></li>
            <li><a href="#">Movie</a></li>
          </ul>
        </li>
        <li><a href="#">Bengali</a></li>
      </ul>
    </li>
    <li class="hori"><a href="#">Contacts</a></li>
  </ul>
</div>

    Dropdown Menu #3
    Screenshot
    Dropdown Menu #3
    Source
    <style type="text/css">
.menu {
  width: 100%;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  font: normal normal 16px Droid Serif;
  float: left;
  clear: both;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #343434;
}
.menu li {
  list-style: none;
}
.menu a {
  color: #888;
  text-decoration: none;
  line-height: 1em;
  display: block;
}
.menu ul#navig {
  float: left;
  clear: both;
  display: block;
  width: 100%;
  overflow: visible;
}
.menu li.hori {
  padding: 0;
  float: left;
  position: relative;
}
.menu li.hori>a {
  text-align: center;
  padding: 0.7em 1.2em;
}
.menu li.hori:hover>a, .menu ul.sub li:hover a {
  color: #fff;
  text-decoration: none;
  background: #2580a2;
}
.menu ul.sub {
  display: none;
  z-index: 9998;
  position: absolute;
  left: 0;
  top: 100%;
}
.menu li.hori:hover ul.sub {
  display: block;
}
.menu li.hori li {
  display: block;
  float: none;
  z-index: 9999;
}
.menu ul.sub a {
  font-size: 0.85em;
  text-align: left;
  padding: 0.8em 2em 0.8em 1em;
}
</style>

<div class="menu">
  <ul id="navig">
    <li class="hori"><a href="#">Home</a></li>
    <li class="hori"><a href="#">Products</a>
      <ul class="sub">
        <li><a href="#">Drop Down CSS Menus</a></li>
        <li><a href="#">Horizontal CSS Menus</a></li>
      </ul>
    </li>
    <li class="hori"><a href="#">Contacts</a>
  </ul>
</div>

    Dropdown Menu #4
    Screenshot
    Dropdown Menu #4
    Source
    <style type="text/css">
.menu {
  margin: 0;
  padding: 0;
  font: bold normal 16px Droid Serif;
  float: left;
  clear: both;
  white-space: nowrap;
  width: 100%;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.menu li {
  list-style: none;
}
.menu ul#navig {
  margin: 0;
  padding: 0.5em 0.2em;
  float: left;
  clear: both;
  display: block;
  overflow: visible;
  width: 100%;
  background-color: #888;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fff4bb), to(#e4cb69));
  background-image: -webkit-linear-gradient(left, #fff4bb, #e4cb69);
  background-image: -moz-linear-gradient(left, #fff4bb, #e4cb69);
  background-image: -ms-linear-gradient(left, #fff4bb, #e4cb69);
  background-image: -o-linear-gradient(left, #fff4bb, #e4cb69);
  -webkit-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
  -moz-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
  -ms-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
  -o-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
  box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
}
.menu li.horizon {
  margin: 0 10px;
  padding: 0.8em 1em;
  float: left;
  position: relative;
}
.menu li.horizon:hover {
  background: #f0f0f0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 0 1px rgba(10, 10, 10, 0.6);
  -moz-box-shadow: 1px 0 3px rgba(10, 10, 10, 0.6);
  -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -o-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  box-shadow: 1px 0 1px rgba(10, 10, 10, 0.6);
}
.menu li.horizon a {
  color: #1213f0;
  display: block;
  text-decoration: none;
  line-height: 1em;
}
.menu li.horizon>a {
  text-align: center;
}
.menu li.horizon:hover>a {
  color: #222;
  text-decoration: none;
}
.menu ul.sub {
  display: none;
  z-index: 9998;
  height: auto;
  width: 16em;
  padding: 0.6em;
  background: #f0f0f0;
  position: absolute;
  left: 0;
  top: 80%;
  -webkit-border-radius: 0 0.5em 0.5em 0.5em;
  -moz-border-radius: 0 0.5em 0.5em 0.5em;
  -ms-border-radius: 0 0.5em 0.5em 0.5em;
  border-radius: 0 0.5em 0.5em 0.5em;
  -webkit-box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.6);
  -moz-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -o-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.6);
}
.menu li.horizon:hover ul.sub {
  display: block;
}
.menu li.horizon li {
  display: block;
  float: none;
  z-index: 9999;
  margin: 0px;
  padding: 0.5em 0;
  background: #fff0b0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #bfbfbf;
}
.menu li.horizon li:first-child {
  border-radius: 0.5em 0.5em 0 0;
  border-top: 0;
}
.menu li.horizon li:last-child {
  border-radius: 0 0 0.5em 0.5em;
  border-bottom: 0;
}
.menu ul.sub a {
  display: block;
  font-size: 0.9em;
  font-style: normal;
  line-height: 0.9em;
  color: #33a;
  padding: 1em 1.5em;
  margin: 0;
  position: relative;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .1s ease-in-out;
}
.menu ul.sub li:hover a {
  line-height: 1.1em;
  font-size: 1.1em;
  color: #222;
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: 0.6em 0.9em;
}
</style>

<div class="menu">
  <ul id="navig">
    <li class="horizon"><a href="#" >Home</a></li>
    <li class="horizon"><a href="#" >Explore</a>
      <ul class="sub">
        <li><a href="#">Academic Support</a></li>
        <li><a href="#">The Great Show</a></li>
      </ul>
    </li>
    <li class="horizon"><a href="#">Contact</a></li>
  </ul>
</div>

    Dropdown Menu #5
    Screenshot
    Dropdown Menu #5
    Source
    <style type="text/css">
.menu {
  margin: 0;
  padding: 0;
  font: normal normal 16px Droid Sans;
  float: left;
  clear: both;
  white-space: nowrap;
  width: 100%;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.menu li {
  list-style: none;
}
.menu ul#navig {
  padding: 0 0.2em;
  width: 100%;
  overflow: visible;
  float: left;
  clear: both;
  display: block;
  border: 1px solid #555;
  text-shadow: 0 1px 0px #000;
  background-color: #888;
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#656565), to(#b2b2b2));
  background-image: -webkit-linear-gradient(bottom, #656565, #b2b2b2);
  background-image: -moz-linear-gradient(bottom, #656565, #b2b2b2);
  background-image: -ms-linear-gradient(bottom, #656565, #b2b2b2);
  background-image: -o-linear-gradient(bottom, #656565, #b2b2b2);
  -moz-border-radius: 1.5em;
  -webkit-border-radius: 1.5em;
  -ms-border-radius: 1.5em;
  border-radius: 1.5em;
  -webkit-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -moz-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
}
.menu li.first {
  margin: 0 10px;
  padding: 0.5em 1em;
  float: left;
  position: relative;
}

.menu li.first a {
  color: #eee;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
}
.menu li.first>a {
  padding: 0.5em 1em;
}
.menu ul li.first:hover>a {
  color: #222;
  text-decoration: none;
  text-shadow: 0 1px 0 #f2f2f2;
  background-color: #cdcdcd;
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#a4a4a4), to(#f8f8f8));
  background-image: -webkit-linear-gradient(bottom, #a4a4a4, #f8f8f8);
  background-image: -moz-linear-gradient(bottom, #656565, #b2b2b2);
  background-image: -ms-linear-gradient(bottom, #656565, #b2b2b2);
  background-image: -o-linear-gradient(bottom, #656565, #b2b2b2);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -ms-border-radius: 2em;
  border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -moz-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  -o-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
}
.menu ul.sub {
  display: none;
  position: absolute;
  z-index: 9998;
  height: auto;
  width: 16em;
  background-color: #dedede;
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#cfcfcf), to(#fefefe));
  background-image: -webkit-linear-gradient(bottom, #cfcfcf, #fefefe);
  background-image: -moz-linear-gradient(bottom, #cfcfcf, #fefefe);
  background-image: -ms-linear-gradient(bottom, #cfcfcf, #fefefe);
  background-image: -o-linear-gradient(bottom, #cfcfcf, #fefefe);
  -webkit-border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -ms-border-radius: 0.8em;
  border-radius: 0.8em;
  -webkit-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
  -moz-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
  -ms-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
  -o-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
}
.menu ul.one {
  left: -20px;
  top: 100%;
}
.menu li.first:hover ul.one {
  display: block;
  overflow: visible;
}
.menu li.first li {
  display: block;
  float: none;
  margin: 0px;
  padding: 8px 0;
  z-index: 9999;
}
.menu li.first li:first-child {
  border-radius: 0.8em 0.8em 0 0;
}
.menu li.first li:last-child {
  border-radius: 0 0 0.8em 0.8em;
}
.menu ul.one a {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: #333;
}
.menu li.first li:hover {
  background-color: #2580a2;
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#0186ba), to(#04acec));
  background-image: -webkit-linear-gradient(bottom, #0186ba, #04acec);
  background-image: -moz-linear-gradient(bottom, #0186ba, #04acec);
  background-image: -ms-linear-gradient(bottom, #0186ba, #04acec);
  background-image: -o-linear-gradient(bottom, #0186ba, #04acec);
}
.menu li.second:hover>a {
  color: #fff;
  text-decoration: none;
}
.menu ul.two {
  left: 100%;
  top: 30%;
}
.menu li.second:hover ul.two {
  display: block;
  overflow: visible;
}
.menu li.second li:hover a {
  color: #fff;
  text-decoration: none;
}
</style>

<ul id="navig">
  <li class="first"><a href="#" >Home</a></li>
  <li class="first"><a href="#" id="current">Products</a>
    <ul class="sub one">
      <li class="second"><a href="#">Menus</a>
        <ul class="sub two">
          <li><a href="#">Drop Down CSS </a></li>
          <li><a href="#">Horizontal CSS Menus</a></li>
          <li><a href="#">Vertical CSS Menus</a></li>
        </ul>
      </li>
      <li class="second"><a href="#">Links</a>
    </ul>
  </li>
  <li class="first"><a href="#">Contact</a></li>
</ul>
  6. Click 'Save'.
  7. Drag that widget to the top of 'Blog Posts' section as shown in figure below and save arrangement.
  8. Click 'Template' from left navigation menu and then click 'Edit HTML'.
  9. Search for (Ctrl+f) /* Tabs and delete everything (if there any) within that /* Tabs section (as shown in figure below).
    Codes within tab section
  10. Click 'Save template'.
I've tried my best to keep things as simple as possible. If you have any questions on this, please let me know. Enjoy !

Comments

Blogger
Disqus

Post a Comment

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.