Jquery 防止div超出页面

我目前的情况：

我有一个非常简单的css3工具提示菜单，默认情况下是隐藏的，并显示在鼠标上方。它有一个固定的宽度和绝对的右位（中间有一个箭头指向悬停的元素）。我的问题是，在较小的窗口上，悬停元素后，会创建水平滚动条。如何预防？在这种情况下，如何使菜单框显示在左侧

我当前菜单的代码很简单：

<ul><li>Hover me 
<ul><li>Hovered element</li>
<li>Hovered element 2</li></ul>
</ul>

---

当然，还有其他一些款式。css技巧上有jquery脚本可以做到这一点吗

我也遇到过类似的情况。在我的情况下，这些消息是使用JavaScript创建的，因此在创建时，我使用元素的

偏移量

查看它离屏幕右边缘有多远，然后相应地给它一个不同的类（不同的样式）

---

如果没有JavaScript，我认为最好的方法是使用媒体查询，并对所有查询进行全面更改。也许有一个

.left

和一个

.right

版本会有帮助，你可以明确地设置它。

首先你必须处理

媒体查询。所以当这种行为发生时，你必须得到屏幕的大小。并更改设置

大概是这样的：

您的常规css定义：

.reframe {
 //Your Settings
}


@media screen and (min-width: 760px) {
    .reframe { //your new settings }

}

耶！最终得到了一个纯CSS的答案。您可以使用
wordwrap
属性来帮助您。这是更新后的CSS：

ul > li > ul {
    display:none;
}
ul > li:hover > ul {
    margin-left:-15px;
    word-wrap: break-word;    
    display:block;
}

工作示例：
您必须测量鼠标位置并相应地设置工具提示位置-JQuery可以做到这一点，谢谢，我想我将使用该特定方法。看起来最流畅。@PawełRyszka u是受欢迎的，但我不知道为什么我投了反对票lolI不知道，我还不能投反对票/赞成票，但我接受了这个答案：）
ul > li > ul {
    display:none;
}
ul > li:hover > ul {
    margin-left:-15px;
    word-wrap: break-word;    
    display:block;
}