выпадающее меню

[dfg]

Добрый день уважаемые, В общем незнаю в чем беда, 2 дня ковыряюсь в CSS, с копировал с Joomla выпадающее меню, В общем работает но немогу раздвинуть фоновые кнопки на с текстом внутри на одинаковое расстояние друг от друга. Первая и вторая кнопки нармально рассположены, третья уходит в право на растояние чуть больше чем положено, третья уезжает еще дальше. Предлагаю посмотреть код меню

 <div id=horiz-menu>
<ul class="nav" id="horiznav">
<li class="active">
<span class="topdaddy"><a class="topdaddy" href="#">1</a></span><ul>
<li><span class="top"><a href="#">1.1</a></span></li>
<li><span class="top"><a href="#">1.2</a></span></li>
</ul></li>
<li><span class="topdaddy"><a class="topdaddy" href="#">2</a></span><ul>
<li><span class="top"><a href="#">2.1</a></span></li>
<li><span class="top"><a href="#">2.2</a></span></li>
</ul></li>
<li><span class="topdaddy"><a class="topdaddy" href="#">3</a></span><ul>
<li><span class="top"><a href="#">3.1</a></span></li>
<li><span class="top"><a href="#">3.2</a></span></li>
</ul></li>
<li><span class="topdaddy"><a class="topdaddy" href="#">4</a></span><ul>
<li><span class="top"><a href="#">4.1</a></span></li>
<li><span class="top"><a href="#">4.2</a></span></li>
</ul></li>
</ul></div>

и стили css

.nav, .nav * {
 margin:0;
 padding:0;
}

.nav {
 line-height:2.2;
 display:block;
 float:left;
 margin-bottom:0.0em;
 position: relative;
 padding:10px 20px
}
#horiznav { padding: 5px 0px 6px 0px}

div#horiz-menu ul li span.topdaddy a,
div#horiz-menu ul ul li span.topdaddy a {
 background: url(../images/nav-top-bg.gif) repeat-y left;



}
div#horiz-menu ul li span.topdaddy a:hover,
div#horiz-menu ul ul li span.topdaddy a:hover {
 background: url(../images/nav-top-bg-hover.gif)repeat-y left;


}

.nav li:hover ul, .nav li:hover ul ul,
.nav li.sfHover ul, .nav li.sfHover ul {
 left:0px;
 top: 30px;
}
#horiz-menu li li,
#horiz-menu li li li {
 margin: 0px;

}


div#horiz-menu li li span,
div#horiz-menu li li li span,
div#horiz-menu li.active li span,
div#horiz-menu li:hover li span {
 background:none;
}


.nav ul {
 background:#fff; /*IE6 needs this*/
 padding: 0;
 BORDER: #999999 1px solid;
}

.nav li {
 float:left;
 list-style:none;
 position:relative;

}

.nav li li a,
.nav li li li a{
 display:block;
 padding-left:5px;
 text-decoration:none;
 background-image: none;
 float:none;
 width:265px;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 border-bottom-color:#DDDDDD;

}
.nav li li a:hover,
.nav li li li a:hover{
 display:block;
 padding-left:5px;
 text-decoration:none;
 background-image: none;
 float:none;
 width:265px;
 border-bottom-width: 1px;
 border-bottom-style: dashed;
 border-bottom-color:#DDDDDD;
 background:#DDDDDD
}

div#horiz-menu li li a,
div#horiz-menu li li li a {
 height: 18px;
 line-height: 18px;
}

.nav li ul {
 float:none;
 left:-999em;
 position:absolute;
 width: 249px;
 z-index: 5;
}


.nav li:hover li ul,
.nav li.sfHover li ul,
.nav li li:hover li ul,
.nav li li.sfHover li ul,
.nav li li li:hover li ul,
.nav li li li.sfHover li ul {
 top:-999em;
}
.nav li li:hover ul,
 {
 left: 250px;
 top:20px;
 width: 250px;
}

.nav li li {
 position: relative;
 float:none;
 width: 277px;
}

[klierik]

доктайп, сылка на пример, в каких браузерах проблема

[dfg]

К сожаление сайт на локальном сервере, могу выложить все исходники и скриншоты. Проблема в трех браузерах IE7, Opera 9.24 и Mozilla/5.0 Firefox/2.0.0.12 (так написано в о Мозила)

Через час сайт будет в сети, уже заливаю на сервак. Возможно тогда будет проще помочь.

к сожалению неполучилось!

[dfg]

Сайт залил на сервак, вот ссылка, http://mmusa.ru.mastertest.ru/ на данный момент 2 проблемы:

1. крайнее правое подменю выезжает как и все оствльное слева направо, а нужно наоборот, чтоб подменю не выходило за рамки сайта.

2. ширина подменю задаеться в css и везде одинакова, а мне необходимо, чтоб ширина меню была равна кол-ву симвлов самой длинной строки в подменю.

В данном посте, Я обсуждаю непосредственно подменю сайта.

За оперативное решение проблем, будет вознагрождение.

ICQ 416-026-583