Margini/Padding su <ul>e<li>. Comportamento anomalo IE

[Sgro]

Ho questo blocco html (standard, validato, ecc):

<div id="navigation">
    <h2>Navigazione</h2>
    <ul id="menu">[*]Lotti importati[*]Lotti annullati[*]Errori[/list]
    <h2>Selezione errore</h2>
    <ul id="submenu">[*]Tutti[*]Errore generico[*]Errore inizializzazione parametri[*]Errore file pdf[*]Errore SQL Server[*]Errore MySql[*]Errore Access[*]Chiave duplicata[/list]
</div>

Con i relativi stili applicati (ho messo anche i selettori generici usati da altri blocchi della pagina, da cui vengono ereditate alcune proprietà):

body
{
	background-color : #ccc;
	color : #000;
	font-size : 76%;
	font-family : Verdana, Trebuchet MS;
	line-height : 1.5;
	margin : 0;
	padding : 0;
}

h1,h2
{
	text-align : center;
	margin : 0 0 1em 0;
}

h1:first-letter, h2:first-letter
{
	border : 1px solid black;
	background-color : black;
	color : white;
	font-family : Trebuchet MS;
	font-size : larger;
}

h1
{
	font-size : 2em;
}

h2
{
	font-size : 1.5em;
	background-color : inherit;
}

#navigation
{
	position : absolute;
	top : 8em;
	left : 1em;
	width : 15em;
	border : 1px solid black;
	background-color : white;
}

#navigation h2
{
	margin-top : 1em;
	border-top : 1px dotted black;
	border-bottom : 1px dotted black;
}

#menu, #submenu
{
	padding : 0;
	margin : 1em;
	list-style-type : none;
}

E ho il difetto di visualizzazione, con IE7, come da immagine.

Ho notato anche che mettendo display:none agli elementi h2 il problema "svanisce" ma non è ovviamente una soluzione accettabile. Il tutto mi lascia molto perplesse in quanto i due <ul> utilizzano il medesimo stile.

Qualcuno riesce ad aiutarmi a svelare l'arcano?

[Sgro]

Provo a rilanciare la discussione nella speranza che qualcuno riesca ad aiutarmi.