Question

我有一个safari 5移动图像的问题。最初我认为它只是在Safari中用于Windows，但在所有的safari 5中完好无损。具有下拉菜单的列表项似乎下拉了，然后列表顶部的img跳转到列表底部，覆盖最下面的两个列表项。

有人可以帮忙吗？我已尽可能多地获取额外代码（例如鼠标悬停事件），但问题仍然存在

这里的CSS我怀疑safari的问题是：

    #nav,#nav ul {
font-family:verdana;
list-style:none;
margin:0;
padding:0;
position:relative;


}      
#nav {
height:50px;
width: 800px ;
margin-left: auto ;
margin-right: auto ;
overflow:hidden;
top:0;

}  
#nav li {
float:left;
position:relative;
z-index:10;
}
#nav li a {
background:url(../images/bg-menu.png) no-repeat center top;
color:#000;
display:block;
float:left;
font-size:14px;
height:51px;
line-height:40px;
padding:0 10px;
position:relative;
text-decoration:none;
z-index:20;
}
/* Left end padding*/
#nav li:first-child a {
background:url(../images/bg-menu.png) no-repeat left top;
padding-left:45px;
}
#nav li ul li:first-child a {
background-image:none;
padding-left:10px;
}

/* Right end padding*/
#nav li.pad {
background:url(../images/bg-menu.png) no-repeat right top;
display:block;
height:51px;
width:15px;
}
#nav ul {
background:#FFFFFF;
height:auto;
padding:10px 0;
position:absolute;
top:-125px;
width:180px;
z-index:-1;

transition:0.8s ease-in-out;
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-ms-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-transition:0.8s ease-in-out;
-ms-transition:0.8s ease-in-out;
-o-transition:0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
width:180px;

}
#nav ul li a {
background:transparent;
height:20px;
line-height:20px;
width:180px;
}
#nav:hover {
height:200px;
}
#nav li:hover ul {
transform:translate(0,161px);
-moz-transform:translate(0,161px); /*some css3*/
-o-transform:translate(0,161px);
-webkit-transform:translate(0,161px);
-ms-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
color:#6d6e71;
}
.rslides {
  position: relative;
 list-style: none;
  overflow: hidden;
  width: 600px;
  padding: 0;
 margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;    
  }

Safari 7的菜单问题

0 个答案: