Solution For Drop Down Menu Cut-Off in Blogger

Since I faced this problem installing a drop down menu in this site 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.

A common CSS menu can be splitted 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.

Note : Before make any action remember to backup your template. This is very important since if you make some mistake in modify the template code you'll can restart from your backup copy.

* First Step :

- You should be Log in to your account blogger, then click on Template => Edit HTML

- After click on Proceed 

- Suddenly, you will be see this windows as below :

- Then you should find some index to correct CSS Code. So you just type Ctrl + F shortcut key, after that you should type follow the red highlight's photo below :  ]]></b:skin>

- When you searched ready, you just copy this CSS Code below and paste it before ]]></b:skin> 

+ See the under example of picture

#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; }

- Click on Save Template Button

* Second Step :

- Go to Layout => Add a Gadget => Choose HTML/JavaScript

- Copy and Paste this code below to HTML/JavaScript

*Note : <li><a href="#"><b></b>Menu 3</a></li> ========> Insert Your Link

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

- Click Save Button => Click View Blog => So you will be see the drop down menu is cut off

- Now you go to the First Step by : Edit HTML => Ctrl + F => Type "/* Tabs"

* Note : 

+ If you see the code like below, you should select it and delete.

.tabs-inner .section { margin: 0 20px; } .tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels { margin-left: -11px; margin-right: -11px; background-color: $(tabs.background.color); border-top: $(tabs.border.size) solid #ffffff; border-bottom: $(tabs.border.size) solid #ffffff; -moz-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3); -webkit-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3); -goog-ms-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3); box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3); } .tabs-inner .PageList .widget-content, .tabs-inner .LinkList .widget-content, .tabs-inner .Labels .widget-content { margin: -3px -11px; background: transparent $(tabs.background.outer) no-repeat scroll right; } .tabs-inner .widget ul { padding: 2px 25px; max-height: 34px; background: transparent $(tabs.background.inner) no-repeat scroll left; } .tabs-inner .widget li { border: none; } .tabs-inner .widget li a { display: inline-block; padding: .25em 1em; font: $(tabs.font); color: $(tabs.text.color); border-$endSide: 1px solid $(tabs.separator.color); } .tabs-inner .widget li:first-child a { border-$startSide: 1px solid $(tabs.separator.color); } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); }

+ After copy code below and paste instead it.
+ You also know that in this code, we are using z-index: 9;

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

- You should search again by Ctrl + F => ]]></b:skin> => after that you should in z-index: 9; to all property of CSS Code. See code below that I have been inserted. 

#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; }

If you have any problem, and want to help you please comment 
And I will be here to help all of you