JQuery UI position, behavior is weird, position is never the same

Question

So, this is a “mistake” that I have been struggling with for several weeks, I finally came and asked for help.

So, firstly, what I'm trying to achieve is a drop down menu. I haven't coded the code yet, so I decided to just get the experience that I would try. I made a few buttons:

Subsequently, I added a mouseenter event for all of them and got the corresponding drop-down 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 correct item. Then I want to place it right below the button, but it fails. And I have no idea why. I use this code to post them:

 dropdown.position({ my: "center top", at: "center bottom", of: $(this) }) 

This gives me something like this:

He was supposed to be right under the "Fanciers," does anyone know why he does this? I checked the buttons, all have the right size, etc. The drop-down menu has a "position: relative" stylized on it. I tried without, or with absolute, both did not work.

I am using jquery + jquery ui versions for google CDN.

If you close the dropdown menu, it will usually go even further.

Thanks for any tips or help!

Answer 1

I believe that JavaScript should not be used for positioning. I don’t know what you really want or not, but I am doing dropdowns using CSS ( see Violin ), I hope this 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 convenience, I use jQuery hoverintent , which adds a delay for the hang.

Answer 2

I will need to see more code, but I believe your problem could be "from: $ (this)".

Using $ (this), you get a handle to the element itself, not a button (if I interpret your code correctly).

Try the following:

 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 missed something.