0

我在网页顶部有一个由 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 浏览器窗口，以防此菜单在屏幕上垂直变大

4

1 回答 1

0

所以我最终做了一些解决方法来让它工作。我将 CSS 设置为 display:block; 但可见性：隐藏；加载页面时。然后在悬停时 CSS 会将可见性更改为可见。这适用于所有经过测试的浏览器 - IE、Firefox、Chrome 和 Safari。不幸的是，当 DIV 可见性发生变化时，这种解决方法不会动态地重新调整浏览器窗口的大小。

于 2013-06-24T18:28:47.997 回答