CSS Transitions demo
HTML Code
<ul id="trans-nav">
<li><a href="../">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Thingies</a></li>
<li><a href="#">Doohickies</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
CSS Code and including IE adjustment
<!--[if IE]>
<style>
#trans-nav li ul { display: none; }
#trans-nav li:hover ul, #trans-nav li.over ul {display: block; }
#trans-nav li ul li { height: 30px; line-height: 30px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
var navRoot = document.getElementById("trans-nav");
for (i=0; i<navRoot.childNodes.length; i++) {
var node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<![endif]-->