CSS Submenus dropping a pixel with each ul

Question

I'm trying to build my first purely CSS dropdown menu without any plugins, and I got it looking mostly how I want it, but one issue that I have is the drop downs seem to be "off" a pixel vertically, and they seem to drop down another pixel with each level. I've tried throwing so many margin:0s and padding:0s I've lost track. Figured I'd ask for help before I went crosseyed permanantly :)

The page/source/css can be viewed at bezaluhosting.com/testing/menu.htm

Answer 1

Remove vertical-align: middle; from nav ul li {}.

Answer 2

It works if you remove vertical-align: middle from nav ul li