防止 div 离开页面

Question

我现在的情况：

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

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

<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

我也遇到过类似情况。在我的情况下，消息是使用 JavaScript 创建的，所以在创建时，我使用元素的 offset 来查看它离屏幕右边缘有多远，然后给它一个不同的class（不同的样式）相应地。

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

Answer 2

首先你必须使用 Media Queries。所以当这种行为发生时，你必须得到屏幕的大小。并更改设置。

像这样：

您的正常 css 定义：

.reframe {
 //Your Settings
}


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

}

Answer 3

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

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

Preventing div from going outside the page