我有你典型的下拉导航，我试图确保下拉菜单链接始终可访问和可见：
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<!-- etc. -->
</ul>
CSS 真的没有什么特别的（去除了颜色和背景）：
.dropdown,
.dropdown li,
.dropdown ul {
list-style:none;
margin:0;
padding:0;
}
.dropdown {
position:relative;
z-index:10000;
float:left;
width:100%;
}
.dropdown ul {
position:absolute;
top:100%;
visibility:hidden;
display:none;
width:16em;
}
.dropdown ul ul {
top:0;
left:100%;
}
.dropdown li {
position:relative;
float:left;
}
.dropdown li:hover{
z-index:910;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
visibility:visible;
display:block;
}
.dropdown a {
display:block;
padding:1em 2em;
}
.dropdown ul li {
width:100%;
}
有未知数量的顶级链接（它们是由用户创建的）。我遇到的问题是，如果顶级链接离右侧太远，有时下拉菜单（向右）会离开屏幕。我添加了一些 CSS 来弥补：
.dropdown > li:last-child ul { /* ...or use a class on the last link for IE */
right:0;
}
现在最后一个移到左边而不是屏幕外，这很好，但有几个问题：
- 最后一个链接我并不总是需要这些样式，因为它并不总是在屏幕的边缘（比如只有 3 个链接）。
- 当浏览器窗口调整大小时，链接堆叠在彼此之上（按设计）。有时，序列中间的链接最终位于右边缘，并且它们的下拉菜单被切断。
- 有时“倒数第二个”链接的菜单也会超出边界。
调整此演示中的面板大小以了解我的意思（红色区域被认为是“屏幕外”） http://jsfiddle.net/G7qfq/
多年来，我一直在为这个烦人的常见问题苦苦挣扎，但从未找到令人满意的解决方案。有什么方法可以检查下拉菜单是否会离开屏幕，如果是，添加/删除class名称或其他内容，以便我可以使用 CSS 将其保留在屏幕上？
我可能使用的一个线索是，如果菜单确实离开屏幕，它总是会在窗口底部产生一个垂直滚动条，但我不确定如何使用这些知识。我尝试了这个关于检测垂直滚动条的问题的公认答案，但由于某种原因它总是返回true，并且总是添加“边缘”类（也许时间有问题？）：
$(".dropdown li").on('mouseenter mouseleave', function (e) {
// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");
// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible"
|| cStyle.overflowY == "visible"
|| (hasVScroll && cStyle.overflow == "auto")
|| (hasVScroll && cStyle.overflowY == "auto");
if (hasVScroll) {
$(this).addClass('edge');
} else {
$(this).removeClass('edge');
}
});
使用 javascript 演示：http: //jsfiddle.net/G7qfq/2/
真的，我不想看到垂直滚动条，即使是一瞬间，所以我不确定这是要走的路，而且可能会出现误报（滚动条出于其他原因）。
我也尝试了这个答案中的解决方案，我承认，我不太明白，并且无法让它工作：http: //jsfiddle.net/G7qfq/3/
$(".dropdown li").on('mouseenter mouseleave', function (e) {
var elm = $('ul:first', this);
var off = elm .offset();
var t = off.top;
var l = off.left;
var h = elm.height();
var w = elm.width();
var docH = $(window).height();
var docW = $(window).width();
var isEntirelyVisible = (t > 0 && l > 0 && t + h < docH && l+ w < docW);
if ( ! isEntirelyVisible ) {
$(this).addClass('edge');
} else {
$(this).removeClass('edge');
}
});
我假设该解决方案需要 javascript，并且我正在使用 jQuery，但我不知道如何解决这个问题。有任何想法吗？