javascript - How to force jQuery dropdowns to full width? -
I have created a jQuery dropdown menu that shows the DIV on the hover, but I drop the dropdown in width 100% across the page.
CSS:
ul.oe_menu div {status: absolute; Top: 103px; Left: 1px; Background: #fff; Width: 200; / * This dropdown specifies DIV * / height width: 210px; Padding: 30px; display none; }
To see the complete code, take a look at ; Expand the preview section to see the problem.
Thank you!
The reason for this is that if you set 100% width of the div, then it is your parents Taking 100% of the width (compatible li
).
A solution for this is to set the position of the div has been fixed
so that its width should take the width of the page when its width is 100%.
ul.oe_menu div {position: fixed; Top: 103px; Left: 0px; Background: #fff; Width: 100%; Height: 210px; display none; }
In this way you have to remove left: n
to div
s.
To make the transition even more natural, you can use .slideUp (200)
[] or .animate ({"opacity": 0}, {complete: task () {$ (This). CSS ("Opacity", "1"}}});
[]. mouseleave
as
Hope it helps.
Comments
Post a Comment