Drop down menu in blogger template: the submenu cut off problem

Since I faced this problem installing a drop down menu and googling didn't help me a lot to find a fix for the submenu "cut off" problem I propose here my solution. It seem this problem happen only using "official" blogger templates. Official mean the template generated by the blogger settings panel. Hope that these information will be useful for someone who found the same problem. ;-)

Install a drop down menu inside a blogger template is quite simple. There are a lot of tutorials explaining step by step how to make this operation. I'll resume here the basic steps to follow.

First you must to choose a drop down menu to add. Basically there are two main choices regarding the "technology" to use, pure CSS menu or javascript menu (this second option is usually based to some framework like Mootools or JQuery). I moved to CSS menu and I immediately found this "cut off" problem, I don't know if the same problem turns out also using javascript menu.

The faster solution for have a ready made CSS menu is to use some on-line service generating them like, for example:

CSS Menu Maker

CSS Menu Generator

Pure CSS Menu
CSS Menu Builder

Or, alternately, you can get a generic CSS menu code and customize it. Some examples of sites to get codes:

Bulletproof CSS Sliding Doors 
CSS Horizontal Drop-Down Menu
CSS3 Dropdown Menu
CSS Menu Samples

The links above are the result of a quick google search, you can find tons of other examples. By the way, for this explanation purpose, we'll got as a target example this simple CSS menu.

A common CSS menu can be divided in two main parts. One are the CSS properties and the second is the HTML code used for create the menu structure. The CSS properties must be insert in the template code and the HTML code can be used inside a widget.

Let's begin from the first step. In this phase you need to edit the template code. To know how to edit the template code you need to follow the instruction explained in this post. Read it as first and once finished all the steps come back here and continue reading.

Search inside the template code text window for this line:

]]></b:skin>

and insert the following menu CSS properties before this line:

#nav, .nav, #nav .nav li { 
margin:0px;
padding:0px; 
}

#nav li {
float:left; 
display:inline; 
cursor:pointer;
list-style:none;
padding:0px 10px 0px 10px; 
border:1px #000 solid; 
position:relative;
}

#nav li ul.first {
left:-1px; 
top:100%;
}

li, li a {
color:#000;
text-decoration:none;
}

#nav .nav li { 
width:100%;
text-indent:10px;
line-height:30px; 
margin-right:10px;
border-top:1px #000 solid; 
border-bottom:1px #000 solid;
border-left:none;
border-right:none; 
background:#fff;
}

#nav li a {
display:block; 
width:inherit;
height:inherit;
}

ul.nav { 
display:none; 
}

#nav li:hover > a, #nav li:hover { 
color:#fff; 
background:#000; 
}

li:hover > .nav { 
display:block; 
position:absolute; 
width:200px; 
top:-2px; 
left:50%; 
z-index:1000;
border:1px #000 solid; 
}

li:hover { 
position:relative; 
z-index:2000; 
}

Now click over the "Save Template" button and this first step is finished.

Let's go to start the second step. Go to the "Layout" section and click over the "Add a Gadget" link as showed in the picture.

A pop up window will appear. This new window allow you to select the type of gadget to add. Scroll down the page until you found the "HTML/Javascript" widget as showed in the picture.

To complete operation and add the widget to your blog click over the white cross button on the right of the "HTML/Javascript" line. This special widget allow to insert some custom HTML or Javascript code inside your blogger template. Once added the widget a new pop up window will ask you to insert the custom HTML code as showed below.

Here you must to type a title as you prefer (I typed "Drop Down Menu") and in the content section you must to insert the following HTML code:

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

This code describe the structure of your menu. In this example the menu will have 4 main item and a submenu connected to the first item. OK, click over the "SAVE" button and we finished to integrate the drop down menu in your blog.

Please, note that this menu structure is only an example and doesn't contain direct link. If you really want to use this example as working one in your blog you need to convert the menu item to direct link by changing the items label as follow:

<li><a href="http://yourblog.blogspot.com/link1.html">Menu 1</a></li>
<li><a href="http://yourblog.blogspot.com/link2.html">Menu 2</a></li>
....

Easy, isn't it?

Unfortunately if you make this addition to an "official" blogger template (repeat here that "official" mean a template generated by the Blogger configuration panel) is very probably you are going to see a problem like this:

The submenu is "cutted off". For fix this problem we need to go back to the first step procedure and reach the window allowing to modify the template code. Inside the template code search for this point:

/* Tabs

----------------------------------------------- */

.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

and change the "overflow" property as follow:

/* Tabs

----------------------------------------------- */

.tabs-outer {
  overflow: visible;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

To complete the modify you need to add the same property to your menu CSS code if this is not already present. In our example the menu CSS code change as follow:

#nav, .nav, #nav .nav li {
 margin:0px;
 padding:0px;
 overflow: visible;
}

Generally is enough to add the "overflow" property to the main menu CSS box, but if this modify doesn't fix the problem try to add the same property to all the child CSS boxes.

OK, Now click the "Save Template" button and check your blog. The result should appear like this:

Finally we finished? Well, not really. The changes explained above allow to fix the problem of  submenu "cut off" but if you try to test the same drop down menu using Internet Explorer you'll probably note a problem like this:

Doesn't matter the version of Internet Explorer are you currently using to browse the blog since the "official" blogger templates always contain this directive:

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

that instructs Internet Explorer to work like the old version 7. Force using the "engine" of this old revision have the advantage to be sure that the page will be showed always in the same mode but this mean also to face the bugs present in this target revision. One of these bugs was connected to the wrong management of the CSS "z-index" property that cause the problem just saw above. Anyway let's go to see how to fix also this additional problem. Go back to the first step again and repeat the procedure to show the window allow to modify the template code. We need to add the "z-index" property to all CSS elements of the menu and also to some part of the original template code.

Search for the same point of usual:

/* Tabs

----------------------------------------------- */

.tabs-outer {
  overflow: visible;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

and modify the code as showed:

/* Tabs

----------------------------------------------- */

.tabs-outer {
  overflow: visible;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
  z-index: 9; 
}

Now change all the menu CSS code as follow:

#nav, .nav, #nav .nav li { 
margin:0px; 
padding:0px; 
overflow: visible;
z-index: 9;  
}

#nav li {
float:left; 
display:inline; 
cursor:pointer;
list-style:none;
padding:0px 10px 0px 10px; 
border:1px #000 solid; 
position: relative;
z-index: 9; 
}

#nav li ul.first {
left:-1px; top:100%;
z-index: 9; 
}

li, li a {
color:#000;
text-decoration:none;
z-index: 9; 
}

#nav .nav li { 
width:100%;
text-indent:10px;
line-height:30px; 
margin-right:10px;
border-top:1px #000 solid; 
border-bottom:1px #000 solid;
border-left:none;
border-right:none; 
background:#fff;
z-index: 9; 
}

#nav li a {
display:block; 
width:inherit;
height:inherit;
z-index: 9; 
}

ul.nav { 
display:none; 
z-index: 9; 
}

#nav li:hover > a, #nav li:hover { 
color:#fff; 
background:#000; 
z-index: 9; 
}

li:hover > .nav { 
display:block; 
position:absolute; 
width:200px; 
top:-2px; 
left:50%; 
z-index:1000; 
border:1px #000 solid; 
}

li:hover { 
position:relative; 
z-index:2000; 
}

OK, now we really finished. At least I didn't find any other problem yet. If I'll some some new one I'll update this post. In the meanwhile I hope that these information will be useful for all.