Меню CSS недоступно в Chrome

Question

Моя панель меню прекрасно работает в firefox, но в Chrome почти невозможно перетащить подменю с помощью мыши, потому что они исчезают.

Спасибо за вашу помощь

Thats мой CSS с заголовком-части и навигации (не обращайте внимания на ссылки в HTML, то для Symfony.):

/*--------------Header---------------*/ 
 

 
#header, #header a{color:#C0BAB6; background-color:#FFFFFF;} 
 

 
#header #hgroup{float:left; padding:25px 40px;} 
 
#header #hgroup h1, #header #hgroup h2{} 
 
#header #hgroup h1{font-size:36px;} 
 
#header #hgroup h2{font-size:13px;} 
 

 
#header nav {margin:60px 0 20px 0; background-color: #97999B; -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15);width: 660px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; float:right;} 
 
#header nav ul{float: right;} 
 
#header nav ul li{display:inline-block; text-transform:uppercase; margin-right: -7px; position: relative;} 
 
#header nav li.last{margin-right:0;} 
 
#header nav ul a{color:#FFFFFF; background-color:#97999B;padding: 15px 12px; display:inline-block;} 
 

 
#header nav ul li:hover{color:#FF4C4C; background-color: #E2E5E7;} 
 
#header nav ul li:hover a{color:#FF4C4C; background-color:#E2E5E7;} 
 

 
#header nav ul li ul li { background: #97999B; display: block; border-top: 1px #FFFFFF solid;} 
 
#header nav ul li:hover ul a{color:#FFFFFF; background-color:#97999B; width: 100%; display:inline-block;} 
 
#header nav ul li:hover ul {display: block; opacity: 1; visibility: visible;} 
 
#header nav ul li ul li:hover a{color:#FF4C4C; background-color:#E2E5E7;} 
 

 
#header nav ul li ul li:hover {color:#FF4C4C; background: #E2E5E7; } 
 
#header nav ul li ul {padding: 0; position: absolute; margin-top: 0; top: 48px; left: 0; width: 120px; -webkit-box-shadow: none;-moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s;}

<header id="header" class="clear"> 
 
       <div id="hgroup"> 
 
        <h1><a href="/"><img height="100" width="146" src="/static/images/logo_rgb_2000px.png" alt="logo"></a></h1> 
 
       </div> 
 
       <nav> 
 
        <ul> 
 
         <li><a href="{{ path('newsindex') }}">Aktuelles</a> 
 
          <ul> 
 
           <li><a href="{{ path('newsindex') }}">News</a></li> 
 
           <li><a href="{{ path('datesindex') }}">Kalender</a></li> 
 
           <li><a href="{{ path('meal_list') }}">Küchenplan</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="{{ path('cms_admin_index') }}">Admin</a></li> 
 
         <li><a href="{{ path('user_profile', {'username': app.user.username}) }}">Profil</a></li> 
 
         <li class="last"><a href="{{ path('logout') }}">Logout</a></li> 
 
        </ul> 
 
       </nav> 
 
       <div class="clear"></div> 
 
      </header>

Answer 1

Проблема заключалась в различном рендеринге firefox/chrome. Разрыв между меню и подменю был 1 px для большого для хрома. Поэтому я уменьшил маржу от 48 до 47 пикселей, и все сработало.