Question

我在网页顶部有一个动态制作的下拉菜单。如果其中一个下拉菜单变得足够大，需要扩展浏览器窗口，那么它不会扩展Safari窗口。这在Internet Explorer和Firefox中都可以正常工作。我已经尝试了几个css设置但似乎无法提出解决方案。任何建议都将不胜感激。

所以这是当子菜单放在页面上时的原始css：

.sub_menu {
display:none;
z-index: 2;
margin-left:5px;
padding:10px;
width: 140px;
position: absolute;
top: 0px;
left: 120px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

display：none使子菜单不显示

然后我有一个在悬停时触发的javascript：

#menu li:hover > ul, #menu li.hover > ul {
display: block;
}

这会显示子菜单，但如果此菜单对于屏幕垂直过大，则不会展开Safari浏览器窗口

Answer 1

所以我最终做了一些解决方法来实现这一点。我将CSS设置为display：block;但能见度：隐藏;加载页面时。然后在悬停时，CSS会将可见性更改为可见。这适用于所有经过测试的浏览器 - IE，Firefox，Chrome和Safari。遗憾的是，当DIV可见性发生变化时，此解决方法不会动态调整浏览器窗口的大小。

下拉菜单不会扩展Safari窗口

1 个答案: