Равномерное пространство горизонтальной навигации

Question

Наконец-то я получил мои более длинные элементы навигационной панели, чтобы они отображались горизонтально, а не складывались вертикально, но я не могу заставить их равномерно распределяться между более короткими элементами в моем контейнере.Я попробовал несколько вещей, которые я исследовал, но безрезультатно.Есть идеи?

Спасибо!

Меню CSS:

#myslidemenu {
padding-top: 10px;
}
.jqueryslidemenu{
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
  position: relative;
  display: inline;
  float: left;
  z-index:100;
  float:left;
}

.jqueryslidemenu ul li.first a {
  margin-left: 0;
  padding-left: 0; 
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display:block;
width:115px;
padding:4px 0px;
text-decoration: none;
line-height: 20px;
outline: none;
text-align:left;
font-size: 12px;
color:#7c7c7c;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #7c7c7c;
}

.jqueryslidemenu ul li a:hover,
.jqueryslidemenu ul li.selected a,
.jqueryslidemenu ul li.current_page_item a {
color: #2a7ea0;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
border:1px solid #cbcbcb;
border-right:none;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
z-index: 99999;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
border-right:none;
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a,
.jqueryslidemenu ul li ul li a:link, 
.jqueryslidemenu ul li ul li a:visited{
width: 160px; /*width of sub menus*/
margin: 0;
border-bottom: 1px solid #cbcbcb;
background: #fff;
color: #999999;
padding:8px 20px;
font-size: 16px;
}

.jqueryslidemenu ul li ul li a:hover{ /*sub menus hover style*/
background: #EAEAEA;
color: #2a7ea0;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
display: none;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
display: none;
}

#menu-wrapper {
height: 69px;
margin: 0 auto;
width: 990px;

}
#menu-container {
  height: 67px;
width: 990px; 
margin: 0;
padding: 0;
background-color: #E6E6DC;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;

}

Или здесь: http://pastebin.com/0pf9u70D

Живой сайт: http://mefo1.ecin1prod1lnx1.com/

Answer 1

Следующие проблемы должны решить ваши проблемы:

Удалите отступы, найденные во многих пунктах вашего меню.

Многие из пунктов меню, в частности <a> тегов, имеют padding-right: 23px;

Внесите следующие изменения в свой CSS:

.jqueryslidemenu ul li a
{
     width: auto;              
     margin: 0 20px 0 20px;    //Adjust this to fit your needs.
     ...
}

Это позволит равномерно распределить каждый элемент на основе шириныпункты меню.

Вы можете использовать следующий скрипт, просто поместите его в раздел заголовка вашей страницы, и это должно решить вашу проблему:

<script type='text/javascript'>
    for(i = 0; i < document.getElementsByClassName('menu-item-object-page').length; i++){
    document.getElementsByClassName('menu-item-object-page')[i].firstChild.style.paddingRight = "0px";}
</script>