title: CSS link hover positioning issue
body: <p>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 <a href="http://jsfiddle.net/11rosicky/zx8oyx2n/3/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>Here is the essentially what is happening.</p>
  
  <pre><code>                &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href='#'&gt;Link 2&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href='#'&gt;Link 3&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Link 5&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Link 6&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Link 7&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Link 8&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href='#'&gt;Link 8&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href='#'&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
  </code></pre>
  
  <p>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.</p>