Horizontal CSS Dropdown Menus work with IE

Sometimes a dropdown navigation menu can not work in IE (Internet Explorer) because there is one setting that  different between IE and other browsers. I will try to give one simple example of a dropdown menu that can work for IE and other browsers. Dropdown navigation menu one separately facilitate visitors looking for information on our blog is to provide an important dropdown navigation links from the pages of the blog. visitors so easy to find what they looking for.

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

/-- menu2 Dropdown navigation --/
#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;
float:left;
}

#menu2 li:hover ul, #menu2 li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;

}
#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. Find this code :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="test (Header)" type="Header">
</b:widget>
</b:section></div>

6. Copy paste this code after code above:

<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.
7. Save your template.

or You can add new HTML/javasrcipt :

 

 

 

Here the full code Download Here

Description: Horizontal CSS Dropdown Menus work with IE Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Horizontal CSS Dropdown Menus work with IE

Posted in: Blog Tips