CSS dropdown menu with submenu aligning to the right edge of it's parent

Question

Here is a very easy example of CSS based dropdown menu: http://jsfiddle.net/V8aL6/

Answer 1

Its better and more clean if you position your list to the right and instead of moving UL out of the screen you could just toggle the display property from none to block.

You will need to make some changes in these rules and add those properties:

#nav li:hover ul {
    display: block;
    right: 0;
}

#nav ul {
    display: none;
}
#nav ul li {
    margin-right: 0;
}

See my updated fiddle: http://jsfiddle.net/V8aL6/2/