Question

I’ve finally gotten my longer nav bar items to all display horizontally instead of stacking vertically, but I cannot get them to space evenly with the shorter items across my container. I’ve tried a number of things I’ve researched to no avail. Any ideas?

Thanks you!

Menu 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;

}

Or here: http://pastebin.com/0pf9u70D

Live site: http://mefo1.ecin1prod1lnx1.com/

Answer 1

The following should fix your issues:

Remove the padding-right found in many of your menu items.

Many of the menu items, specifically the <a> tags, have a padding-right: 23px;

Make the following change to your CSS:

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

This would make each item evenly spaced based on the width of the menu items.

You should be able to use the following script, simply place it in the head section of your page and this should fix your issue:

<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>