фиксированная ширина пунктов горизонтального меню

[ellays]

встала задача перекроить шаблон http://www.globbersthemes.com/demo/tequoia/

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

контейнер меню в index.php

<div class="navigation"> 
 <jdoc:include type="modules" name="position-1" /> 
</div>

код в tdefault.css

#topmenu {
float:left;
width:100%;
height:80px;
background: url(../images/topmenu.png) 0 0 repeat-x;
margin-top:-5px;

}

.navigation {
float:left;
width: 100%;
background:transparent;
 margin-top:13px;
 
}
 
.navigation ul {
list-style: none;
margin:0;padding:0;

}

.navigation ul ul {
margin: 0;
padding: 0; 

}

.navigation ul li {
margin:0px 0 0 0;
padding: 0;
float: left;
list-style: none;
background: none;
display: block; *

}

.navigation ul li ul {
width: 230px;
position: absolute; 
z-index: 99; 
left: -999em; 
height: auto;
w\idth: 230px; 

} 

.navigation ul li ul ul {
margin: 0;

} 

.navigation ul li li {
padding: 0;
margin: 0;
width: 100%;

}

.navigation ul ul a {
width: 100%;

}

.navigation ul li:hover ul ul,.navigation ul li:hover ul ul ul,.navigation ul li.sfhover ul ul,.navigation ul li.havechildsfhover ul ul,
.navigation ul li.havechild-activesfhover ul ul,.navigation ul li.activesfhover ul ul,
.navigation ul li.sfhover ul ul ul,.navigation ul li.havechildsfhover ul ul ul,
.navigation ul li.havechild-activesfhover ul ul ul,.navigation ul li.activesfhover ul ul ul {
 left: -999em;
 
 }
 
.navigation ul li:hover ul,.navigation ul li li:hover ul,.navigation ul li li li:hover ul,
.navigation ul li.sfhover ul,.navigation ul li.havechildsfhover ul,.navigation ul li.havechild-activesfhover ul,
.navigation ul li.activesfhover ul,.navigation ul li li.sfhover ul,.navigation ul li li.havesubchildsfhover ul,
.navigation ul li li.havesubchild-activesfhover ul,.navigation ul li li.activesfhover ul,.navigation ul li li li.sfhover ul,
.navigation ul li li li.havesubchildsfhover ul,.navigation ul li li li.havesubchild-activesfhover ul,.navigation ul li li li.activesfhover ul {
left: auto; *

}

.navigation ul li a {
padding: 25px 8px 0 8px ;
 margin:0;
 display: block; 
 font-weight: bold; *
 font-size:16px;
 text-transform:capitalize;
 height:36px;
 background:transparent;
 color:#0a0a16;
 
}
 
.navigation ul li a:hover {
color:#efe9cf;
background:#0a0a16;

}

.navigation ul li {
background: transparent ;
 border-left:1px solid #aea995;
border-right:1px solid #cdc7ae; 

}
.navigation ul li.active a {
color:#efe9cf;
background:#0a0a16;

} 

.navigation ul li ul {
background:#0a0a16;
margin-top: 0px;
padding-top:15px !important;
padding-bottom: 15px !important;
text-align:left !important;
width:200px;
border:none !important;

}

.navigation ul li ul li {
padding-top:2px ;
padding-bottom:0px ;
background:none !important;
border:none !important;

}

.navigation ul li ul li a{
height:33px !important;
color:#fff !important;
text-align:left !important;
padding-left:20px !important;
padding-top:23px !important;
width:172px !important;
border:none !important;

}

.navigation ul li ul li a:hover *{
color:#0a0a16 !important;
height:33px ;
background:#efd02c;
border:none !important;

}

.navigation ul li ul li ul {
margin-left:190px;
margin-top: -30px;
padding-top:10px !important;
text-align:left !important;

}

воспользовался поиском по форуму, нашел тему http://joomlaforum.ru/index.php/topic,159871.0.html
там советуют

добавьте к тегу a свойство display:block; тогда везде будет фиксированная ширина.

но я не могу понять как применить это на практике.

подскажите, пожалуйста, в какую сторону копать?

[Program_use]

Наверное, имелось ввиду, чтобы ширина была фиксирована, вам необходимо к .navigation ul li a{width: вставить свою ширину.}

И тогда задайте 6 блоков и они будут с одинаковой шириной.

Выглядеть это будет так:
.navigation ul li a{
background: none repeat scroll 0 0 transparent;
color: #0A0A16;
display: block;
font-size: 16px;
font-weight: bold;
height: 36px;
margin: 0;
padding: 25px 8px 0;
text-transform: capitalize;
width: 120px;/*ваша ширина*/
}

[ellays]

Сообщение от Program_use

Наверное, имелось ввиду, чтобы ширина была фиксирована, вам необходимо к .navigation ul li a{width: вставить свою ширину.}

И тогда задайте 6 блоков и они будут с одинаковой шириной.

Выглядеть это будет так:
.navigation ul li a{
background: none repeat scroll 0 0 transparent;
color: #0A0A16;
display: block;
font-size: 16px;
font-weight: bold;
height: 36px;
margin: 0;
padding: 25px 8px 0;
text-transform: capitalize;
width: 120px;/*ваша ширина*/
}

мне посоветовали сделать так

.navigation ul li {
margin:0px 0 0 0;
padding: 0;
width: ### px /* Ваша ширина */
float: left;
list-style: none;
background: none;
display: block;  
text-align: center /* Центрирование */
}

но после этого мое меню стало не горизонтальным, а вертикальным
в меню используется cufon шрифт. это имеет значение?
в чем разница между .navigation ul li a и .navigation ul li

[yaskin]

.navigation ul li a - описываются свойства ссылки
.navigation ul li - описываются отдельные элементы списка, в которых расположены твои ссылки