Horizontal CSS Dropdown Menus work with IE

ilovemyga

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 src="http://corderdrive.com/wp-content/uploads/2011/06/script-hosrizontal.js">
</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>