title: What property is treated differently in Firefox that is preventing it from displaying this properly
body: <p>Okay, I've been working on creating a drop-down menu which has been working well on Google's Chrome. I recently expanded to check the site on Opera, Firefox &amp; Safari.</p>
  
  <p>Safari looks identical to Chrome but Opera and Firefox are showing the 'hidden' text of my drop-down menu. Opera is also not seeming to register paddings at all but my question is:</p>
  
  <p>Q: What element is not being displayed in Firefox the same as it is in Chrome and Safari? </p>
  
  <p>The way I am hiding my menu is by setting the height equal to 0px and then on hover setting it to the proper 30px. I choose this manner as it can be transitioned to have the menu glide up and down. </p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="services.html" class="glow"&gt;Services&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="researchDevelopment.html" class="glow"&gt;Research &amp;amp; Development&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="designAudit.html" class="glow"&gt;Design Auditing&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="training.html" class="glow"&gt;Training&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="licensing.html" class="glow"&gt;Licensing&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="troubleshooting.html" class="glow"&gt;Troubleshooting &amp;amp; Performance Analysis&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="pageTemplate.html" class="glow"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pageTemplate.html" class="glow"&gt;Training&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pageTemplate.html" class="glow"&gt;Technology&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pageTemplate.html" class="glow"&gt;Clients&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="publications.html" class="glow"&gt;Publications&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pageTemplate.html" class="glow"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The CSS: </p>
  
  <pre><code>/*--- Nav Bar ---*/
  nav { float: left; margin: 4px 0 0 137px; }
  nav li { list-style: none; float: left; width: 113px; height: 56px; text-align: center; position: relative; }
  nav li:hover { background: url(images/buttonSprite.png) 0 -90px; }
  nav a { display: block; width: 113px; height: 37px; }
  nav a:link { padding-top: 19px; }
  /*--- Creates a delayed glowing effect on the links on hover. ---*/
  nav a.glow, nav a.glow:hover, nav a.glow:focus { text-shadow: none; -webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s;  outline: 0 none; }  
  nav a.glow:hover, nav a.glow:focus { color: #fff; text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; }
  /*--- Drop Down Functionality. ---*/
  nav li ul { list-style: none; height: 0px;}
  nav li ul li, nav li ul li a { height: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; tranistion: all 0.2s ease-in-out; }
  nav li ul li { float: none; width: 263px; background: url(images/buttonSprite.png) 0 -30px; }
  nav li ul a:link { display: block; white-space: nowrap; padding-top: 0px; width: 100%; margin: -10px 0 0 0; }
  /*--- Show drop-down on hover. ---*/
  nav li:hover ul li { height: 30px; } 
  nav li:hover ul a:link { padding-top: 6px; width: 100%; height: 100%; margin: 0 0 0 0; }
  nav li ul li:hover{ background: url(images/buttonSprite.png) 0 -60px; }
  </code></pre>
  
  <p>The drop-down 'subMenu' is contained as an unordered list within its parent list item. After toying with the code, I found that setting </p>
  
  <p><code>nav li ul li { display: block }</code> </p>
  
  <p>Will cause chrome and Safari to reveal the text as well. As a helper here is pictures of what I'm talking about.</p>
  
  <p>Chrome: What I want:</p>
  
  <p><img src="https://i.stack.imgur.com/UAGFk.png" alt="enter image description here"></p>
  
  <p>Firefox: Not so much:</p>
  
  <p><img src="https://i.stack.imgur.com/tfT3i.png" alt="enter image description here"></p>
  
  <p>Menu down, working on all browsers I've tested: </p>
  
  <p><img src="https://i.stack.imgur.com/xntrS.png" alt="enter image description here"></p>
  
  <p>Thanks in advance. And also, I'm quite new with this stuff so if there is formatting conventions or unnecessary code please let me know so I can write better code. I took the CSS formatting style from Apple.com's styleSheets as it seems slightly nicer than the</p>
  
  <pre><code>itemReference {
      attribute: setting;
  }
  </code></pre>
  
  <p>style</p>