This method has proven to be effective and versatile. One great advantage is the ability to utilize media queries to easily switch between horizontal and vertical layouts, especially useful for mobile devices.

HTML

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

​
#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

To create a responsive layout, consider using flexbox:

<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

View the code on jsfiddle: http://jsfiddle.net/RAaJ8/

Check browser compatibility for flexbox here: http://caniuse.com/flexbox

Here are the key components of an ideal solution:

1. It should automatically adjust to fit the width of the navigation container
2. It should be able to support a dynamic number of menu items.

To achieve these requirements, we can create a simple menu using a ul inside a nav container.

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

To ensure that the ul takes up the full width of its parent nav, we can use the :after pseudo-element with width: 100%.

Although this solution works well, it may create unwanted whitespace from the pseudo-element. To eliminate this issue in all browsers including IE8, simply set the line-height of the ul to 0 and then revert it back to 100% on its li child elements. Check out the example CodePen and the CSS solution below:

CSS

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}

After experimenting with various solutions, I concluded that this is the most straightforward and adaptable option I could come up with, drawing inspiration from others.

HTML

<div id="container">
<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>
</div>

CSS

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

You can choose to remove the rounded ends for first/last child elements, but they add a nice touch (especially for your client's preference).

The container width sets the limit for the horizontal list, but you have the flexibility to assign an absolute value to the UL element instead.

Feel free to tweak it as needed...

http://jsfiddle.net/tobyworth/esehY/1/

Here is a solution that should work for you.

<div id="menu-wrap">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

#menu-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

#menu {
    display: inline;
    height: 87px;
    width: 100%;
}

.menu-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;
}

Have you experimented with adjusting the li width to 16% and adding a margin of 0.5%?

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

Note: Consider setting the UL width to 100%:

nav ul { width: 100%; margin: 0 auto; }

The CSS flexbox model comes in handy for situations like this, allowing you to evenly distribute the remaining width among each li element.

After experimenting with various methods, I discovered that the most effective solution for me was incorporating padding-right: 28px;

I tested different padding settings to achieve a balanced spacing between items.

One way to maintain consistent spacing is by adding a margin-left to your list items instead of defining the width. Ensure that the combined margin(s) and list item widths fit within 900px.

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  margin-left: 35px;
}

I hope this suggestion proves helpful.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#layout { width: 100%; border: 1px solid gray; display: block; text-align: justify; }
element, div { display: inline-block; }
div { width: 100%; }
</style>
</head>

  <div id="layout">
    <element>
      <div>
        apple
      </div>
    </element>
    <element>
      <div>
        banana
      </div>
    </element>
    <element>
      <div>
        cherry
      </div>
    </element>
    <element>
      <div>
        date
      </div>
    </element>
    <element>
      <div>
        fig
      </div>
    </element>
    <element>
      <div>
        grapefruit
      </div>
    </element>
    <div></div>
  </div>
</html>