What property is treated differently in Firefox that is preventing it from displaying this properly

Question

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:

Firefox: Not so much:

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

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

Answer 1

It sounds like you're setting a too-small height on a list item but not setting overflow:hidden or anything. Then you run into this WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=33094 and get incorrect rendering in Chrome and Safari while other browsers are rendering this per spec.

Answer 2

Once lesson I've learned when styling lists: other than display, position and float, do not put any styling on LI, put it all on the A-tag with display:block. 99% of your problems will go away.