title: CSS dropdown menu with submenu aligning to the right edge of it's parent
body: <p>Here is a very easy example of CSS based dropdown menu: <a href="http://jsfiddle.net/V8aL6/" rel="noreferrer">http://jsfiddle.net/V8aL6/</a></p>
  
  <pre><code>    &lt;ul id="nav"&gt;
      &lt;li&gt;
          &lt;a href="#" title="Return home"&gt;Home&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" title="About the company"&gt;About&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;The product&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Meet the team&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" title="The services we offer"&gt;Services&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sevice one&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sevice two&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sevice three&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Sevice four&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" title="Our product range"&gt;Product&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Small product (one)&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Small product (two)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Small product (three)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Small product (four)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Big product (five)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Big product (six)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Big product (seven)&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Big product (eight)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Enourmous product (nine)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Enourmous product (ten)&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Enourmous product (eleven)&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a href="#" title="Get in touch with us"&gt;Contact&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Out-of-hours&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Directions&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But I can't find a solution to align the submenu to the right edge of it's parent, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/peOxP.png" alt="simple drop-down menu aligned left"></p>