防止div走出页面

Question

我目前的情况：

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

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

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

css就是这样的：

ul > li > ul {display:none}
ul > li:hover > ul {display:block}

当然还有其他一些造型。有没有关于css技巧的jquery脚本呢？

Answer 1

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

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

工作示例：http://jsfiddle.net/p7wzv57j/

Answer 2

我遇到了类似的情况。在我的情况下，消息是使用JavaScript创建的，所以在创建时，我使用元素的offset来查看它与屏幕右边缘的距离，然后给它一个不同的类（不同的样式） ）因此。

如果没有JavaScript，我认为您可以获得的最佳效果是使用媒体查询，并对所有这些进行全面更改。拥有.left和.right版本可能会有所帮助，您可以明确地设置它。

Answer 3

首先，您必须使用Media Queries。因此，当发生此行为时，您必须获得屏幕的大小。并更改设置。

这样的事情：

你正常的css定义：

.reframe {
 //Your Settings
}


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

}