Vertical CSS Dropdown menus Navigation Work with ie

In my previous post I've shared with horizontal css that works with IE and now I will try to share another post in connection therewith, Vertical CSS Dropdown Menus work with IE.
one to make our blog look attractive and easy to explore by visitors.

Below the steps :
1. Find this code ]]></b:skin>
2. Place below CSS style before]]></b:skin> :

#menu2, #menu2 ul, #menu2 li{
margin: 0;
padding: 0;

}

#menu2 li {
/* make the list elements a containing block for the nested lists */
list-style: none;
position: relative;
width:180px;
cursor:pointer;
z-index:9999;
overflow:none;
margin:-5px;
}

#menu2 li:hover ul, #menu2 li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
left:185px;
top:5;
}
#menu2 ul ul{
position: absolute;
top:0;
visibility:none;
}
#menu2 li ul {
display: none;
width: 11em; /* Width to help Opera out */

}
#menu2 a, #menu2 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
padding: 2px 3px;
}

#menu2 h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu2 a:hover {
color: #a00;
background: #fff;
}

#menu2 ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

3. Then Find this code </head>
4. Place this code before </head>

<script>
sfHover = function() {
var sfEls = document.getElementById("menu2").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

5. Copy and Paste this code to Current Setting:

<ul id="menu2">
<li><a href="http://www.blogger.com/">Parent 1</a><ul>
<li><a href="http://www.blogger.com/">Child 1</a></li>
<li><a href="http://www.blogger.com/">Child 2</a></li>
<li><a href="http://www.blogger.com/">Child 3</a></li>
<li><a href="http://www.blogger.com/">Child 4</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/">Parent 2</a><ul>
<li><a href="http://www.blogger.com/">Child 1</a></li>
<li><a href="http://www.blogger.com/">Child 2</a></li>
<li><a href="http://www.blogger.com/">Child 3</a></li>
<li><a href="http://www.blogger.com/">Child 4</a></li>
</ul>
</li>
</ul>

Change The red text with your url and your Link name.
6. Save your template.

or You can add new HTML/javasrcipt :

Here the full code Download Here

Description: Vertical CSS Dropdown menus Navigation Work with ie Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Vertical CSS Dropdown menus Navigation Work with ie