не получается сделать горизонатльное меню сайта.......во всех браузерах как то он не корректно отображается, во всех по разному.......
КОД:
/*стиль самой менюшки располагается в head*/
<style type="text/css">
#menu{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 10pt;
font-family: tahoma;
}
#menu li{
position: relative;
width: 180px;
height: 30px;
margin: 0;
padding: 0;
text-align: center;
display: inline;
float: left;
background: url(....) left top;
}
#menu li:hover, #menu li.over{
background-position: left bottom;
}
#menu li ul.submenu{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
display: none;
left: 0;
top: 20px;
}
#menu li:hover ul.submenu, #menu li.over ul.submenu{
display: block;
}
#menu a{
display: block;
text-decoration: none;
}
</style>
/*сама менюшка в body*/
<ul id="menu">
<li><a href="
http://tv/" color="#ffffff">menu1</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
</ul>
</li>
<li><a href="...">menu2</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
</ul>
</li>
<li><a href="...">menu3</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
</ul>
</li>
<li><a href="...">menu4</a></li>
</ul>
/*прописал еще код для корректного отображнение в ишаке*/
<script type="text/javascript">
function menuhover(){
if(!document.getElementById('menu')) return;
var lis = document.getElementById('menu').getElementsByTagName('LI');
for (var i=0; i<lis.length; i++){
lis
.onmouseover=function(){this.className+=' over';}
lis.onmouseout=function(){this.className=this.className.replace(/ over/gi,'');}
}
}
if(window.attachEvent) window.attachEvent('onload', menuhover);
</script>
помогите пажаста, скажите что не так я сделал!