html - 下拉菜单不扩展 Safari 窗口

Question

我在网页顶部有一个由 div 动态制作的下拉菜单。如果其中一个下拉菜单变得足够大以至于需要扩展浏览器窗口，那么它不会扩展 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;但 visibility :隐藏；加载页面时。然后在悬停时 CSS 会将可见性更改为可见。这适用于所有经过测试的浏览器——IE、Firefox、Chrome 和 Safari。不幸的是，当 DIV 可见性发生变化时，此解决方法不会动态调整浏览器窗口的大小。