Horizontal menu with evenly spaced items, and dynamic clickable area (anchors)

Question

I'm trying to create a horizontal menu that is always as wide as the browser window (with a set min width and is centered horizontally in the window), has items that are evenly spaced, AND has dynamic clickable anchors (the actual clickable anchor widens and shrinks appropriately to match the items as they widen and shrink as the browser's width is changed)

A friend suggested that I change my menu from static to fit the width of the browser window as it re-sizes, and I like that idea, but I'm just having trouble figuring out how I'm going to even attempt it on my own site. He linked the following stackoverflow question and answer to me, and there are two provided solutions, but in both solutions, the clickable area is limited to the actual text only.

The way that I know to fix that, generally speaking, is to assign the display property of block to the anchor tags. I then assigned padding to give the 'block' it's clickable size and to properly space the items from each other. But I don't see how that will work exactly considering that these items aren't static. Does anyone have any ideas, or suggestions?

Thanks!

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

EDIT: 01/21/2014

I think I figured out the solution(see below)

This is the example I'm working with ATM, although I just figured out that this isn't difficult and the problem I was having was related to some assumptions that I made based on my trying to get this to work with a text-justify based version of a scalable navigation menu. It was also somewhat related to an issue I was having with a red dot in the middle of my CSS that wasn't showing up in dreamweaver:

CSS Anchor tag properties are being ignored completely in #nav li a

That red dot was causing my CSS code to break and as an effect, none of the properties I assigned to the anchor tag would do anything.

So it really seems that it was as simple as assigning a display property of block to the anchor tags -shrugs-. I apologize for taking up everyone's time on this, but thank you for your time regardless! I very much appreciate the help! :) I'm going to try and turn this into something somewhat useful though and put my working example code below (it needs some tweaking depending on what you want to do and the very last cell has a double border effect, but the main mechanics of it seem to be fully functional for me in Google Chrome at least)

(btw, I must give credit to felix for this code. It was their posted answer that I used as a starting base to try and get all of this working for me.

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container)

Thank you all again!

(jsfiddle version: http://jsfiddle.net/T392Z/)

HTML

<ul id="nav">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>

CSS

#nav {
    position: relative;
    left: -2px;
    margin: 0;
    padding: 0;
    border: 2px solid black;
    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 black;
    text-decoration: none;
}
#nav li a {
    font-size: 32px;
    text-decoration: none;
    color: white;
    display: block;
}

Answer 1

Make an ul with a width of 100%. Make the widths of all of the li elements percentages as well (For 4 items, make each 25%, etc.). Instead of using a border property to separate the li elements, use box-shadow with the properties:

box-shadow: 0px 0px 1px #000000;