title: How would I position a dropdown to the left or right of a vertical CSS menu?
body: <p>I've written a basic CSS menu - a vertical nav-bar designed to be placed to the side. However, in addition to it's current design I'd like to be able to place the drop down from item 2.0 to either the left or right of the parent as well. </p>
  
  <p>What would be the best way to accomplish this? </p>
  
  <p>I'm also including a JSFiddle link of the current code: <a href="https://jsfiddle.net/eagqxnaz/1/" rel="nofollow noreferrer">https://jsfiddle.net/eagqxnaz/1/</a></p>
  
  <pre><code>&lt;ul class="navbar"&gt;
    &lt;li&gt;&lt;a href="#"&gt;1.0&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;2.0&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="/?"&gt;2.1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/?"&gt;2.2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/?"&gt;2.3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/?"&gt;2.4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;         
    &lt;/li&gt;
  &lt;/ul&gt;
  
  .navbar li  {
      width: 150px; 
      text-align: center;
      list-style: none;
      background-color: #a1a0a5;
  }
  
  .navbar a {                         
      color: #FFF;
      display: block;
      padding: 8px 4px;
  }
  
  .navbar a:hover {
      background-color: #5a5775;
  }
  
  .navbar li ul {
      display: none;
  }               
  
  .navbar li:hover ul     {
      position: absolute;
      display: block;
      left: 0;
  }
  </code></pre>