Верстка меню горизонтального

Верстаю меню. Вот как оно должно выглядеть:
http://s58.radikal.ru/i162/1003/80/5b9070e1d2e6.jpg

Код меню:

HTML:

1. <ul id=sddm>
2.         <li><a href="#">Главная</a></li>
3. <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Статьи</a>
4.        <div id="m1">
5.        <a href="#">11111</a>
6.        <a href="#">22222</a>
7.        <a href="#">33333</a>
8.        </div>
9.    </li>
10. <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Мультимедиа</a>
11.        <div id="m2">
12.        <a href="#">Видео</a>
13.        <a href="#">Фото</a>
14.        </div>
15. </li>
16. <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Справочник</a>
17.        <div id="m3">
18.        <a href="#">Правила баскетбола</a>
19.        <a href="#">Великие игроки</a>
20.        </div>
21. </li>
22. <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Общение</a>
23.        <div id="m4">
24.        <a href="#">Форум</a>
25.        <a href="#">Обратная связь</a>
26.        </div>
27. </li>
28. </ul>

CSS:
[css]#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
background-image:url(img/pix_menu_top.jpg);
padding: 0;
list-style: none;
float:left;
width:20%;
border:solid 1px #ea8a05;
border-top:none;
border-right:none;
font: bold 12px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 10px 10px;
color: #C30;
text-align: center;
text-decoration: none}

#sddm li a:hover
{color: #F60;

}


#sddm div
{ position: absolute;
visibility: hidden;
width:20%;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid Black;
}


#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #A52A2A;
font: 11px arial;
}


#sddm div a:hover
{ background: #3E3E3E;
color: #FFF}[/css]

Вопрос в следующем: Если я прописываю border:solid 1px #ea8a05; то у меня когда 2 li рядом стоят то у одного border слева 1px, а у другого справа border 1px, а вместе дают 2 px. как сделать чтоб на стыке был border 1px, если вставлять border-right:none; то проблема решится только с одного края.
Вроде понятно выразился))

 

Прописал так: [css]{ margin: 0;
margin-left:-1;
background-image:url(img/pix_menu_top.jpg);
padding: 0;
list-style: none;
float:left;
width:20%;
border:solid 1px #ea8a05;
border-top:none;
border-right:none;
font: bold 12px arial}
[/css]
Все равно двойные границы((

 

Сделал так: [css]
{ margin: 0;
margin-left:-1;
background-image:url(img/pix_menu_top.jpg);
padding: 0;
list-style: none;
float:left;
width:200px;
border:solid 1px #ea8a05;
border-top:none;
font: bold 12px arial}[/css]

Таблица, где находится меню в 1000px, почему последнее меню не вписывается? 5*200=1000!??

 

нет. Не пойму в чем дело

 

Вот стиль таблицы, никаких отступов нет.

[css].tabl {
background-image:url(img/parket_center.jpg);
border:solid 1px #ea8a05;
}
[/css]