title: Positioning of dropdown menu in CSS
body: <p>sorry if this is a bit of a mess but this is my first project and I think I've got myself in a bit of a mess. I don't have anyone in real life to refer to and I've spent hours trying to fix it!
  When you click on the 'Menu' item the dropdown appears to the bottom left of the Nav element, not under the 'Menu' item.</p>
  
  <p>The code is below and I've uploaded to <a href="http://www.danielbeale.co.uk/donalberto/" rel="nofollow noreferrer">http://www.danielbeale.co.uk/donalberto/</a> if it helps?</p>
  
  <p>I'd be really grateful if someone could help - I'm losing my mind!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    display: block;
    float: right;
    padding: 5px;
  }
  
  .menu {
    display: inline;
  }
  
  nav a {
    text-align: center;
    font-family: playball;
    font-size: 1.5em;
    color: black;
    text-decoration: none;
    padding: 5px;
  }
  
  .menu a:hover {
    color: darkred;
  }
  
  .dropdown-toggle {}
  
  .dropdown-menu {
    position: absolute;
    background-color: white;
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul class="menu"&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle"&gt;Menu&lt;b class="caret"&gt;&lt;/b&gt;       `enter code here`&lt;/a&gt;
        &lt;ul class="dropdown-menu" style="display:none"&gt;
          &lt;li&gt;&lt;a href="menu.html"&gt;Evening&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="lmenu.html"&gt;Lunch&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>