How To Add a Drop Down Menu To a Blogger Blog (Without Javascript!)

Drop down menus can help organize and categorize content links. While many web developers debate whether or not they are good or bad practice, there’s no doubt that they can help clean up a design if you have a rather busy blog. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket!

Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing.

The menu I’ve put together is built entirely with CSS3 and HTML. No Javascript to deal with here, so it is nice and lightweight and easy to configure. You can view a demo of it here. To get started, you’ll need to head on over to the Layout page in your Blogger dashboard and add a HTML/Javascript gadget in the top/header area:

Add the following code to your new widget, customizing the titles and links to match your own blog:

<ul id="icbabdrop">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>
    Topics
    <ul>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Blogging</a></li>
      <li><a href="#">Art and Design</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

You will need to replace the # characters with the actual links of your pages, and the menu titles with your own.
The text above in RED shows a menu title (“Topics”) with three sub-menu items that appear when you roll over it.
when you roll over it.

To add additional menu items with sub-menus, you can copy the red portion of the code and paste a duplicate before or after any <li> or </li> codes, like so:

<ul id="icbabdrop">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>
    Topics
    <ul>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Blogging</a></li>
      <li><a href="#">Art and Design</a></li>
    </ul>
  </li>
<li>
    Topics 2
    <ul>
      <li><a href="#">Lifestyle 2</a></li>
      <li><a href="#">Blogging 2</a></li>
      <li><a href="#">Art and Design 2</a></li>
    </ul>
  </li>
 <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Now, you’ll want to pop on over to the Template > Customize page of Blogger and scroll down to Advanced > CSS. Add the following code to give that menu some style: 

/* DROPDOWN MENU BY icanbuildablog.com */
.tabs-inner .widget ul#icbabdrop {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#icbabdrop 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: #fff; /* 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#icbabdrop li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#icbabdrop 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#icbabdrop li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */ 
}
.tabs-inner .widget ul#icbabdrop 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#icbabdrop 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#icbabdrop li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover { 
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

You can change the colours and fonts wherever I’ve placed the comments in the code.
If you want to center your menu as in the demo, just add: <center> before your HTML code in the gadget you added, and </center> at the end of it.