<!-- DROPDOWN NAVBAR --> <!-- stylesheet for FF2, Op9, IE7 (strict mode) --> <style type="text/css"> #navbar { display:inline; width:100%; position:absolute; background-color:transparent; top:-30px; left:0px; height:60px; z-index:999999; } #navbar:hover{ top:0px; height:30px; } </style> <!-- stylesheet for IE6 and lower --> <!-- (not supporting element:hover) --> <!-- first, unhide the navbar through css --> <!-- second, hide the navbar and mimic --> <!-- the effect with javascript, if available --> <!--[if lt IE 7]> <style type="text/css"> #navbar { height:30px; top:0px; } </style> <script type="text/javascript"> var navbar = document.getElementById('navbar'); if(navbar){ navbar.onmouseover = function(){ navbar.style.top = '0px'; navbar.style.height = '30px'; } navbar.onmouseout = function(){ navbar.style.top = '-30px'; navbar.style.height = '60px'; } if (navbar.captureEvents){ navbar.captureEvents(Event.MOUSEOVER); navbar.captureEvents(Event.MOUSEOUT); } navbar.onmouseout(); } </script> <![endif]--> <!-- end dropdown navbar -->