Positioning of dropdown menu in CSS

Question

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.

The code is below and I've uploaded to http://www.danielbeale.co.uk/donalberto/ if it helps?

I'd be really grateful if someone could help - I'm losing my mind!

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;
}

<nav>
  <ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle">Menu<b class="caret"></b>       `enter code here`</a>
      <ul class="dropdown-menu" style="display:none">
        <li><a href="menu.html">Evening</a></li>
        <li><a href="lmenu.html">Lunch</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

You can try adding in nav class

 position:relative;

and in the dropdown-menu class remove float:right and add

right:0;

So this will be new CSS..

nav {
    position: relative;
    display: block;
    float: right;
    padding: 5px;
}
.dropdown-menu {
    position:absolute;
    background-color: white;
    right:0px;
}

Hope this will help.....