Sub menu CSS ทำไมเปิดด้วย chrome กับ FireFox ต่างกัน

<style>
#tikky { list-style-type: none; height: 40px; padding: 0; margin: 0; }
   #tikky {list-style-type: none; height: 40px; padding: 0; margin: 0; }
   #tikky li { float: left; position: relative; padding: 0; line-height: 40px; background: #CD853F url(img/nav-bg1.png) repeat-x 0 0; }
   #tikkyli:hover { background-position: 0 -40px; }
   #tikky li a { display: block; padding: 0 15px; color: #F5DEB3; text-decoration: none; }
   #tikky li a:hover { color: #FFFFFF; }
   #tikky li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #CD853F; list-style-type: none; padding: 0; margin: 0; }
   #tikky li:hover ul { opacity: 1; }
   #tikky li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
   #tikky li:hover ul li { height: 30px; line-height: 30px; }
   #tikky li ul li a { background: #CD853F; }
   #tikky li ul li a:hover { background: #d8ae7e; }
   #tikky li { -webkit-transition: all 0.2s; }
   #tikky li a { -webkit-transition: all 0.5s; }
   #tikky li ul { -webkit-transition: all 1s; }
   #tikky li ul li { -webkit-transition: height 0.5s; }
</style>

<ul id="tikky">
        <li><a href="#">Menus</a>
           <ul>
              <li><a href="#">Menu I</a></li>
              <li><a href="#">Menu II</a></li>
              <li><a href="#">Menu III</a></li>
           </ul>
        </li>
        <li><a href="#">TikkyStore</a>
     <ul>
              <li><a href="#">TikkyStore I</a></li>
              <li><a href="#">TikkyStore II</a></li>
              <li><a href="#">TikkyStore III</a></li>
              <li><a href="#">TikkyStore IIII</a></li>
           </ul>
    
     </li>
               <li><a href="#">TikkyStore Hello</a></li>
 
     </ul>