Greetings fellow web wizards. I'm building a theme for some web design software, and incorporating split navigation using an unordered list. As to be expected, the only browsers having difficulty displaying this correctly are IE6/7. Here's the relevant html code and css:

HTML

<div id="subMenu">
<ul><li><a href="../index.html" rel="self">Home</a></li><li><a href="page2.html" rel="self" id="current">Styled Text</a><ul><li><a href="../page2/page1/page1.html" rel="self">4-Tiered</a></li><li><a href="../page2/page3/page3.html" rel="self">Split Menus</a></li><li><a href="../page2/page15/page15.html" rel="self">Really Long Link Name</a></li></ul></li><li><a href="../page9/page9.html" rel="self">Blog</a></li><li><a href="../page10/page10.php" rel="self">Contact Form</a></li><li><a href="../page11/page11.html" rel="self">File Sharing</a></li><li><a href="../page12/page12.html" rel="self">Movie Album</a></li><li><a href="../page13/page13.html" rel="self">Photo Album</a></li></ul>
</div>

CSS (general stylesheet)

#subMenu ul {margin: 0;padding: 0;list-style: none;}
#subMenu ul li {display: list-item;}
#subMenu li a {display: none;}
#subMenu ul ul {margin: 0;padding: 0 5px;width:100%;list-style-type: none;}
#subMenu ul ul li {line-height: 40px;display:block;float: left;}
#subMenu ul ul a {display:inherit;float:left;padding:0 10px;color: #999;font-size: 1.2em;text-transform: uppercase;text-decoration: none;}
#subMenu ul ul a:hover{color: #e4e4e4;}
#subMenu ul ul #current{font-weight: bold;color: #fff;letter-spacing: 1px;}
#subMenu ul ul .currentAncestor {color: #fff;text-decoration: overline;}
#subMenu ul ul ul {display: none;}

CSS (conditional comments for IE 6/7)

#headerTransition {font-size: 1px;}
#subMenu ul ul {padding: 0;}
#subMenu ul ul li {padding-top:5px;display:block;line-height:20px;}
#subMenu ul ul a {display:block;font-size:12px;}

The problem is both IE 6/7 add a ~5px vertical indent to the menu items displayed in this submenu. For example, when "Styled Text" is the current page selected in the main menu, the submenu displays its child menu items fine. However, when the next main menu list item ("File Sharing") with children is selected, the submenu displays its menu items 5px lower. And this continues, so that the next main menu item with children is another 5px lower, etc. Obviously, I'd like the menu items in the submenu to be displayed without this 5px vertical indent.

Any thoughts/advice/pointers on how to address this would be greatly appreciated. Many thanks for your time. :)