Dynamically position element

I have the following:

http://jsfiddle.net/oshirowanen/2vqvD/

How do I dynamically position 开发者_JAVA百科the .dropdown element no matter where the .navigation is placed on the screen?

EDIT 1:

For example, whereever the .navigation is on the screen, the .dropdown's top left corner should be directly below the bottom left corner of the .navigation making it look like a single element when the .navigation is clicked on.

---

Here you go: http://jsfiddle.net/2vqvD/2/

BTW, I re-factored your code changing both the JavaScript and CSS.

---

Could be solved like this:

<div class="menu">
    <div class="navigation">Account ▼
        <div class="dropdown">
            picture of user goes here<br />
            other options go here<br />
            further options go here
        </div>
    </div>
</div> 

i.e. putting the .dropdown inside the .navigation-div.

---Edit

Hmm.. after reading your question again, it might be that I misunderstood it?