What property is treated differently in Firefox that is preventing it from displaying this properly
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 & Safari.

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:

Q: What element is not being displayed in Firefox the same as it is in Chrome and Safari? 

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. 

The HTML:

    <nav>
		<ul>
			<li><a href="services.html" class="glow">Services</a>
				<ul>
					<li><a href="researchDevelopment.html" class="glow">Research &amp; Development</a></li>
					<li><a href="designAudit.html" class="glow">Design Auditing</a></li>
					<li><a href="training.html" class="glow">Training</a></li>
					<li><a href="licensing.html" class="glow">Licensing</a></li>
					<li><a href="troubleshooting.html" class="glow">Troubleshooting &amp; Performance Analysis</a></li>
				</ul>
			</li>
			<li><a href="pageTemplate.html" class="glow">Products</a></li>
			<li><a href="pageTemplate.html" class="glow">Training</a></li>
			<li><a href="pageTemplate.html" class="glow">Technology</a></li>
			<li><a href="pageTemplate.html" class="glow">Clients</a></li>
			<li><a href="publications.html" class="glow">Publications</a></li>
			<li><a href="pageTemplate.html" class="glow">Contact Us</a></li>
		</ul>
	</nav>

The CSS: 

    /*--- 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; }

The drop-down 'subMenu' is contained as an unordered list within its parent list item. After toying with the code, I found that setting 

`nav li ul li { display: block }` 

Will cause chrome and Safari to reveal the text as well. As a helper here is pictures of what I'm talking about.

Chrome: What I want:

![enter image description here][1]

Firefox: Not so much:

![enter image description here][2]

Menu down, working on all browsers I've tested: 

![enter image description here][3]

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

    itemReference {
        attribute: setting;
    }

style


  [1]: http://i.stack.imgur.com/UAGFk.png
  [2]: http://i.stack.imgur.com/tfT3i.png
  [3]: http://i.stack.imgur.com/xntrS.png
What property is treated differently in Firefox that is preventing it from displaying this properly
===

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 & Safari.

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:

Q: What element is not being displayed in Firefox the same as it is in Chrome and Safari? 

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. 

The HTML:

    <nav>
		<ul>
			<li><a href="services.html" class="glow">Services</a>
				<ul>
					<li><a href="researchDevelopment.html" class="glow">Research &amp; Development</a></li>
					<li><a href="designAudit.html" class="glow">Design Auditing</a></li>
					<li><a href="training.html" class="glow">Training</a></li>
					<li><a href="licensing.html" class="glow">Licensing</a></li>
					<li><a href="troubleshooting.html" class="glow">Troubleshooting &amp; Performance Analysis</a></li>
				</ul>
			</li>
			<li><a href="pageTemplate.html" class="glow">Products</a></li>
			<li><a href="pageTemplate.html" class="glow">Training</a></li>
			<li><a href="pageTemplate.html" class="glow">Technology</a></li>
			<li><a href="pageTemplate.html" class="glow">Clients</a></li>
			<li><a href="publications.html" class="glow">Publications</a></li>
			<li><a href="pageTemplate.html" class="glow">Contact Us</a></li>
		</ul>
	</nav>

The CSS: 

    /*--- 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; }

The drop-down 'subMenu' is contained as an unordered list within its parent list item. After toying with the code, I found that setting 

`nav li ul li { display: block }` 

Will cause chrome and Safari to reveal the text as well. As a helper here is pictures of what I'm talking about.

Chrome: What I want:

![enter image description here][1]

Firefox: Not so much:

![enter image description here][2]

Menu down, working on all browsers I've tested: 

![enter image description here][3]

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

    itemReference {
        attribute: setting;
    }

style


  [1]: http://i.stack.imgur.com/UAGFk.png
  [2]: http://i.stack.imgur.com/tfT3i.png
  [3]: http://i.stack.imgur.com/xntrS.png