Question

I have a dropdown with content. I’m trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.

Since the dropdowns are centred in the browser, I’m having difficulty getting it work go where I want.

http://jsfiddle.net/XkuHy/2/

<div id="sticky">
    <div id="nav">
        <div class="logo">logo</div>
        <span class="n list">browse</span>
        <span class="n list">search</span>
        <div class="n drop">
            <span>My Account</span>
            <div>
                hello, world!
            </div>
        </div>
    </div>

NOTE: CSS is not my strong suit.

NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle – not sure why so ignore the code dumped as you can see it in the fiddle.

Answer 1

The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.

You can see the updated demo here: http://jsfiddle.net/XkuHy/14/