проблема такая- я делаю меню с вкладками и выравниваю его по центру под шапку, но текст съезжается, также как и вкладки. Как мне сделать так чтобы текст был ровно в центре кнопки и вкладки ровно под кнопкой?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#menu{
list-style:none;
padding:0;
margin:0;
}
#menu li{
float:left;
height:34px;
padding:0;
margin:0;
width:80px;
left: 144px;
text-align:center;
background:#0CF;
position:relative;
}
#menu li ul{
list-style:none;
padding:0;
margin:0;
width:150px;
display:none;
position:absolute;
left:0;
top:20px;
}
#menu li ul li{
float:none;
height:20px;
margin:0;
width:150px;
text-align:center;
background:#0CF;
}
#menu li a{
display:block;
width:150px;
height:20px;
}
#menu li:hover ul, #menu li.jshover ul{
display:block;
}
#menu li:hover, #menu li.jshover{
background:#F00
}
</style>
<script>
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>
</head>
<body>
<ul id="menu">
<li><a href="index/0-1">ГЛАВНАЯ</a></li>
<li>
<a href="#">МОИ СОБАКИ</a>
<ul>
<li><a href="index/0-21">Нора</a></li>
<li><a href="index/0-22">Лина</a></li>
</ul>
</li>
<li>
<a href="#">ФРИЗБИ</a>
<ul>
<li><a href="index/0-23">СЛП</a></li>
<li><a href="index/0-24">Дог-фризби</a></li>
<li><a href="index/0-25">Виды игр с дисками</a></li>
<li><a href="index/0-29">Рейтинг</a></li>
</ul>
</li>
<li><a href="#">ПОСЛУШАНИЕ</a>
<ul>
<li>
<a href="index/0-28">Дрессировка</a></li>
</ul>
</li>
<li><a href="photo">ФОТО</a></li>
<li>
<a href="#">ДИСКИ</a>
<ul>
<li><a href="/index/0-26">Диски</a></li>
<li><a href="index/0-27">Кликеры</a></li>
</ul>
</li>
<li><a href="index/0-19">УСЛУГИ</a></li>
<li><a href="index/0-20">ССЫЛКИ</a></li>
<li><a href="index/0-3">КОНТАКТЫ</a></li>
</ul>
</body>
</html>
