CSS link hover positioning issue - html

Question

I wrote a little generic menu and need help figuring out why second level links always display to the right of first level links. Code is kind of lenghty so here is a jsfiddle.
Here is the essentially what is happening.
<nav>
<ul>
<li><a href='#'>Link 1</a></li>
<li>
<a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
<li>
<a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
<li><a href='#'>Link 6</a></li>
<li><a href='#'>Link 7</a></li>
<li><a href='#'>Link 8</a></li>
<li>
<a href='#'>Link 8</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
</ul>
</nav>
Link 2 and Link 2 Sub Links hover to the right. I want Link 8 Sub Link to hover left. Right now it goes out of bounds of the wrapper div. Ideally, IF there is enough space (256px) to the right, hover right. If there is not, hover left. Top links at the far right should have sub links hover left.

Answer 1

Try this http://jsfiddle.net/zx8oyx2n/6/
HTML
<ul class="left" >
<li><a href='#'>Sub Link 1</a>
</li>
</ul>
CSS
.left{
right:0;
}

Answer 2

I used
nav ul li:last-child ul { right: 0; }
because I'm not really concerned about IE8 or less.