menus evenly spaced where links take entire space

Question

How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?

I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955

I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.

Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/ Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.

There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.

Here is the html:

<nav id="idMainNav">
<ul>
    <li><a href="#">ASDF</a></li>
    <li><a href="#">QWER</a></li>
    <li><a href="#">ZXCVB</a></li>
    <li><a href="#">UIOP</a></li>
    <li><a href="#">HJKL</a></li>
    <li><a href="#">VBNM</a></li>
    <li><a href="#">TYUI</a></li>
</ul>
</nav>

Here is the css:

#idMainNav{
width: 900px;
}

#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}

#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}

#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}

#idMainNav li:first-child {
padding-left: 10px;
}

#idMainNav li:last-child {
padding-right: 10px;
}

li {
background: green;
}

li:nth-child(odd) {
background: red;
}

#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}

Answer 1

The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).

Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.