Warum funktioniert der folgende Übergang in Firefox ohne die Einheiten nicht? Sobald Sie die Einheiten hinzugefügt haben, funktioniert es. Es scheint, dass die anderen Hauptbrowser den Einheiten gleichgültig gegenüberstehen.

Soweit ich weiß, ist dies das einzige Beispiel für eine Übergangszeit von '0' ohne Einheiten, die in Firefox nicht funktioniert.

Sie können es arbeiten sehen, und mit den Einheiten,hier bei JSFiddle.

Und hier ist der gleiche genaue Code ohne die Einheiten, und gebrochen,auf JSFiddle.

Wie Sie sehen, ist Firefox der einzige Browser, der anscheinend kaputt geht. Hier ist auch der Code:

HTML:

<nav>
  <ul id="nav">
    <li>
      <a href="#" id="nav1">Home</a>
    </li>
    <li>
      <a href="pasta.html" id="nav2">Charters</a>
      <ul>
        <li><a href="#">New Groups</a></li>
        <li><a href="#">Current Groups</a></li>
      </ul>
      </li>
    <li>
      <a href="same.php" id="nav3">Funding</a>
      <ul>
        <li><a href="#">Funding Guide</a></li>
        <li><a href="#">Get Funding</a></li>
        <li><a href="#">Treasurers</a></li>
        <li><a href="#">Calendar</a></li>
      </ul>
    </li>
    <li>
      <a href="#" id="nav4">Accounts</a>
    </li>
    <li>
      <a href="magis2.swf" id="nav5">Services</a>
      <ul>
        <li><a href="#">Shuttle Service</a></li>
        <li><a href="#">Van Reservations</a></li>
        <li><a href="#">Rattech</a></li>
        <li><a href="#">Sound System</a></li>
      </ul>
    </li>
  </ul>
</nav>​

CSS:

/****************************
Functionality
*****************************/

/* Menu header */
#nav > li {
  float: left;
  margin: 0 19px;
  padding: 0 1px 19px 0;
  position: relative;
}
/* Dropdown elements */
#nav > li:hover ul {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0, 0;
  /*Remove the units here and in the next selector to break it*/
  -moz-transition-delay: 0s, 0s;
  -o-transition-delay: 0, 0;
  transition-delay: 0, 0;
}
#nav ul {
  visibility: hidden;
  z-index: 1000;
  width: 140px;
  padding: 8px 0;
  position: absolute;
  top: 35px;
  left: -35px;
  opacity: 0;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition-property: opacity, visibility;
  -moz-transition-property: opacity, visibility;
  -o-transition-property: opacity, visibility;
  transition-property: opacity, visibility;

  -webkit-transition-duration: .2s, 0;
  /*Remove the units here and below to break it*/
  -moz-transition-duration: .2s, 0s;
  -o-transition-duration: .2s, 0;
  transition-duration: .2s, 0;

  -webkit-transition-delay: 0, .2s;
  /*Remove the units here and below to break it*/
  -moz-transition-delay: 0s, .2s;
  -o-transition-delay: 0, .2s;
  transition-delay: 0, .2s;
}

/*********
Style (this should be irrelevant)
*********/

a {
  color: #000;
  display: block;
  font-size: 13px;
  text-decoration: none;
  font-family: 'Georgia', serif;
}
#nav ul a {
  font-size: 12px;
  padding: 10px 18px;
}
#nav ul li:hover {
  background: #e9e9e9;
}
nav {
  width: 470px;
  height: 45px;
  margin-top: 40px;
  margin-left: 10px;
}

Ich entschuldige mich für die große Menge an "Styling", das unabhängig von dem vorliegenden Thema ist. Möglicherweise besteht jedoch eine Kopplung zwischen dem von mir verwendeten Stil und dem fehlgeschlagenen Übergang, sodass ich den Code vollständig einbeziehe. Es ist auch eine viel schönere Speisekarte mit dem Styling :)