I'm working on a clients website and i have designed the navigation like this

 

 

Each navigation text link needs to fill the width of the li giving the effect above, i have no idea how to achieve this, i've tried fill text/ bigtext etc but can't seem to get them to work like this.

 

Does anyone have any ideas or code that could help me out?

 

My code for the navigation is below, It will run on wordpress so i don't really want to add classes to the li/a tags.

<div class="nav">
 <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MOVIES</a></li>
    <li><a href="#">PROJECTS</a></li>
    <li><a href="#">CONTACTS</a></li>
 </ul>
</div>	

thanks in advance.

Might be able to work with something like

http://fittextjs.com/

I've tried that, doesn't seem to work on li a tags, well at least i can't get it to.

@@cibgraphics I've had it working, but instead of setting each font size differently like home 24px, clips 34px and so on for example, it will just set all the li's to say 16px.

 

so each menu item has the same font size...

 

Each menu item needs to be calculated somehow and each would need a different font size.

Try this https://github.com/zachleat/BigText

Example
http://jsfiddle.net/9n2p6htt/

Sorry i forgot to post here, I got it fixed with bigtext, i managed to get that solution to work, thank you for all your help!