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.
1. Find this code ]]></b:skin>
2. Place below CSS style before]]></b:skin> :
#menu2, #menu2 ul, #menu2 li{3. Then Find this code </head>
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 */
}
4. Place this code before </head>
<script src="http://corderdrive.com/wp-content/uploads/2011/06/script-hosrizontal.js">
</script>
5. Copy and Paste this code to Current Setting:
<ul id="menu2">Change The red text with your url and your Link name.
<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>
6. Save your template.
or You can add new HTML/javasrcipt :