I have a CSS based drop-down menu, which uses nested
UL
elements. It works great.
My issue is that if the browser is towards the minimum width of the page, the right-most menu will "collide" with the browser's edge and get rendered partially outside the visible window. When the
UL
gets displayed, I would like to see if there is enough room and, if not, shift it far enough to the left so that it can be rendered completely.
The relevant CSS is:
#menu-table td > ul > li > ul {
position:absolute;
z-index:500;
display:none;
margin-left:-1px;
}
#menu-table td > ul > li:hover > ul {
display:block;
}
I am thinking that I could intercept the
LI
element's
onMouseEnter
event, assuming that it gets processed before the
:hover
style gets applied. But I am not sure how to calculate the position of the
UL
or its relative position to the window's right edge.
If it makes any difference, I am using CSS2 and XHTML 1.1. I know this can be done as I've seen it. Any suggestions?