JQuery UI Position, behaving strangely, position is never the same

So this is a 'bug' I have been fighting with for several weeks already, I finally came around and ask for help.

So, first, what I am trying to achieve is a dropdown menu. I haven'开发者_StackOverflow中文版t code one yet so I thought just to get the experience I would try. What I made are several buttons:

Afterwards I added an mouseenter event to all of them and retrieved the corresponding dropdown menu using the 'for' attribute as an indicator. I do it like this:

var dropdown = $('.menu_dropdown[for="'+$(this).attr("id")+'"]');

It works, it gets the right element. I then want to position it right under the button, but that fails. And I have no idea why. I use this code to position them:

dropdown.position({

                        my: "center top",
                        at: "center bottom",
                        of: $(this)

                    })

It gives me something like this:

It should have been right under "Fanfictions", does anyone know why it does this? I checked the buttons all have the right size etc.. The dropdown menu has "position: relative" styled on it. I tried without, or with absolute, both didn't work.

I use the google CDN jquery + jquery ui versions.

If you make the dropdown menu hide, it tends to go even further away afterwards.

Thank you for any hints or help!

I believe JavaScript shouldn't used for positioning. I don't know is it what you really want or not but I do the dropdowns with CSS like this (see fiddle), I hope it helps:

HTML:

<ul>
    <li><a href="#">Menu1</a><div class="dropdown"></div></li>
    <li><a href="#">Menu2</a><div class="dropdown"></div></li>
    <li><a href="#">Menu3</a><div class="dropdown"></div></li>
</ul>

CSS:

li{float:left; position:relative;width:60px; height:20px;}
.dropdown{position:absolute; width:300px; height:200px; display:none;}
li:hover .dropdown{display:block;}

For better user experience I use jQuery hoverintent that adds a delay to hover.

I will need to see more code, but I believe your issue might be "of: $(this)".

Using the $(this) you are getting a handle on the element itself and not the button (If I am interpreting your code correctly).

Try this:

var button = $(this);
var dropdown = $('.menu_dropdown[for="'+ button.attr("id")+ '"]');
dropdown.position({

                        my: "center top",
                        at: "center bottom",
                        of: button

                    });

Let me know if I am missing something.