I created a basic menu and I'm struggling to understand why the second level links always appear to the right of the first level links. Since the code is quite lengthy, here's a jsfiddle link for reference.
Here's what's happening in essence:
<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>
The issue is that Link 2 and its Sub Links hover to the right side, while I want Link 8 Sub Link to instead hover on the left. Currently, it extends beyond the boundaries of the wrapper div. Ideally, if there's enough space (256px) to the right, the hover should be on the right. If not, then the hover should be on the left. Also, top links at the far right should have their sub links hover on the left side.