CODEWITHSUNDEEP
htmlcss
Will Tuttle
Will Tuttle

Reputation: 450

jQuery. make menu float to the right of parent?

Sorry the title is a bit misleading. I have a menu that I want to float to the top-right of its parent div. So that the menu begins to drop from the same height as its parent's top. I know I can use margin-left:100% to make the menu float to the right of the parent. But right now the menu begins to drop from the bottom right corner of the parent. However, trying to use margin-top to line the tops up causes the menu to expand upwards to reach the top instead of beginning at the top and dropping down.

Here is the base code I was using : http://jsfiddle.net/4jxph/915/

margin-left:100%

So to put it simply. I'd like the menu to begin at the top right corner of the parent div rather than the bottom corner.

Upvotes: 0

Views: 198

Answers (1)

greenish
greenish

Reputation: 1042

You need to set the position of the button to relative and the position of the drop down to absolute. Like this:

#button {
    height: 32px;
    width: 184px;
    margin: auto;
    position: relative;
}
.file_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
    position: absolute;
    left:100%;
    top:0px;

}

See here: http://jsfiddle.net/T946y/

Upvotes: 1

Related Questions