Here's my current dilemma:
I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I'm facing is that when viewing the menu on smaller windows, a horizontal scrollbar appears after hovering over the element. How can I prevent this? Is there a way to make the menu box appear on the left side in such situations?
The code for my existing menu is straightforward:
<ul><li>Hover me
<ul><li>Hovered element</li>
<li>Hovered element 2</li></ul>
</ul>
And the CSS looks something like this:
ul > li > ul {display:none}
ul > li:hover > ul {display:block}
In addition to other styles. Is there a jQuery script or CSS trick available to address this issue?