CSS轉換隻能在Safari

Question

Here不工作是我創建了一個下拉選項卡上的懸停代碼

， 向下滑動的過渡效果，除了Safari的瀏覽器都工作正常。

我檢查在Safari 5.1.7

HTML

<nav class="tabs"> 
    <ul class="clearfix"> 
     <li><a href="">Tab 1</a> 
      <ul> 
       <li><a href="">SubMenu 1</a></li> 
       <li><a href="">SubMenu 2</a></li> 
       <li><a href="">SubMenu 3</a></li> 
       <li><a href="">SubMenu 1</a></li> 
       <li><a href="">SubMenu 2</a></li> 
       <li><a href="">SubMenu 3</a></li> 
      </ul> 
     </li> 
     <li><a href="">Tab 2</a> 
     <ul> 
       <li><a href="">SubMenu 1</a></li> 
       <li><a href="">SubMenu 2</a></li> 
       <li><a href="">SubMenu 3</a></li> 
       <li><a href="">SubMenu 1</a></li> 
       <li><a href="">SubMenu 2</a></li> 
       <li><a href="">SubMenu 3</a></li> 
      </ul> 
     </li> 
     <li><a href="">Tab 3</a> 
     <ul> 
       <li><a href="">SubMenu 1</a></li> 
       <li><a href="">SubMenu 2</a></li> 
       <li><a href="">SubMenu 3</a></li> 

      </ul></li> 
    </ul> 
</nav> 

CSS

* { 
    margin: 0; 
    padding: 0; 
    font-size: 16px; 
    font-family: arial; 
} 
a { 
    text-decoration: none; 
    padding: 10px; 
    display: block; 
    color: green 
} 
.clearfix:after { 
    clear: both; 
    content: " "; 
    display: block 
} 
ul { 
    list-style: none; 
    width: 100%; 
    background: red; 
} 
.tabs > ul > li { 
    float: left; 
    position: relative; 
} 
.tabs > ul > li > a { 
    position: relative; 
    background: red; 
    color: #fff; 
    z-index: 1; 
    padding: 10px 80px; 
} 
.tabs ul ul { 
    position: absolute; 
    left: 0; 
    top: -300px; 
    width: 200px; 
    text-align: center; 
    -webkit-transition: top 0.6s ease-in-out; 
    -moz-transition: top 0.6s ease-in-out; 
    -ms-transition: top 0.6s ease-in-out; 
    -o-transition: top 0.6s ease-in-out; 
    transition: top 0.6s ease-in-out; 
    background: yellow; 

} 
.tabs li:hover ul { 
    top: 39px; 
} 

無法弄清楚到底是什麼問題。

Answer 1

更新code

只要改變

.tabs li:hover ul { 
    top: 100%; 
} 

到

.tabs li:hover ul { 
    top: 39px; 
}