How do I align one li to the right and have a dropdown list down from it?

Here is the webpage: http://ift.tt/1GbQobe

So I am a beginner web designer/programmer and I am just trying to make something to learn myself CSS and HTML (and JavaScript), but I seem to have a problem aligning the 'Archive' to the right of the list, beneath the search box and make the drop down list appear beneath the menu class and 'over' the main content area. I have tried floating it right, but the list element just 'floated' above the others a little. Also, when I hover above the main list

If you feel like it, please leave some advice to the look and the feel of the webpage and what I can do further.

This is the CSS for the menu:

.menu {
    margin-left: 10px;
}

.menu ul li{
    display: inline-block;
    transition: all 0.3s;
}

.menu ul li ul {
    display: none;
    opacity: 0;
}

.menu ul li ul li {
    float: right;
}

.menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.menu ul li ul li a:hover {
    background-color: #333;
}

.menu ul li:hover {
    background-color: #333;
}

.menu ul li a {
    color: #fff;
    display: inline-block;
    padding: 5px;
    margin: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}