title: Change dropdown menu side from right to left
body: <p>Here is the navigation bar</p>
  
  <p><img src="https://i.stack.imgur.com/iUVXV.png" alt="1"></p>
  
  <p>Now i want to change the side to this</p>
  
  <p><img src="https://i.stack.imgur.com/XScjV.png" alt="2"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0px;
    padding: 0px;
    font-family: "Oswald", sans-serif;
  }
  body {
    background-color: #E2DCDC;
  }
  nav {
    width: 994px;
    background-color: #77BCF1;
    border: 3px solid white;
    margin: 45px auto;
    color: black;
  }
  nav &gt; .navigationbar_ul {
    list-style-type: none;
    width: 100%;
    font-size: 0px;
  }
  nav &gt; .navigationbar_header {
    width: 100%;
    text-align: center;
  }
  .navigationbar_li {
    display: inline-block;
  }
  .navigationbar_li_left {
    border-right: 3px solid white;
  }
  .navigationbar_li_right {
    border-right: none;
    border-left: 3px solid white;
  }
  .navigationbar_li:last-child {
    margin-right: 0px;
  }
  .navigationbar_li &gt; .navigationbar_a {
    color: black;
    font-size: 16px;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out 0s;
  }
  .navigationbar_li &gt; .navigationbar_a:hover {
    background-color: white;
  }
  .dropdown_ul {
    position: absolute;
    width: 100px;
    display: none;
  }
  .dropdown_ul &gt; .dropdown_li {
    background-color: #77BCF1;
    border: 3px solid white;
  }
  .dropdown_ul &gt; .dropdown_li &gt; .dropdown_a {
    cursor: pointer;
    padding: 10px 15px;
    display: block;
    color: black;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out 0s;
  }
  .dropdown_ul &gt; .dropdown_li &gt; .dropdown_a:hover {
    background-color: white;
  }
  .navigationbar_li:hover .dropdown_ul {
    display: block;
  }
  .float_left {
    float: left;
  }
  .float_right {
    float: right;
  }
  .clear_both {
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul class="navigationbar_ul"&gt;
      &lt;div class="float_left"&gt;
        &lt;li class="navigationbar_li navigationbar_li_left"&gt;&lt;a class="navigationbar_a" href="#"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigationbar_li navigationbar_li_left"&gt;&lt;a class="navigationbar_a" href="#"&gt;Link 2&lt;/a&gt;
        &lt;/li&gt;
      &lt;/div&gt;
      &lt;div class="float_right"&gt;
        &lt;li class="navigationbar_li navigationbar_li_right"&gt;&lt;a class="navigationbar_a" href="#"&gt;Link 3&lt;/a&gt;
          &lt;ul class="dropdown_ul"&gt;
            &lt;li class="dropdown_li"&gt;&lt;a class="dropdown_a"&gt;Link 1&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/div&gt;
      &lt;div class="clear_both"&gt;&lt;/div&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="http://jsfiddle.net/5cdeLznL/1/" rel="nofollow noreferrer">JsFiddle</a></strong></p>
  
  <p><strong>How can i do this?</strong> </p>