Komplizierte Navigation: Listenelemente springen

[Jordaniel]

Hallo,

ich habe eine Listennavigation erstellt, mit Hintergrundbildern. Leider springen die einzelnen Listeneinträge, wenn man auf den jeweiligen Link klickt.

Erstmal die URL, es geht um die vertikale Linkliste links neben dem Foto.:
http://kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Hier das dazugehörige HTML:

<ul id="speisenavi">  
   		  	<li><h1>Traditionelles<br />und Originelles</h1><p><small>Frühstück von 9 bis 18 Uhr</small></p><img src="../images/speisengetraenke/ornament_speisenavi2.gif" alt="Ornament Grafik" width="117" height="19" /></li>  
   		  	<li><a href="kuchen.html" title="Link zu Kuchen und Torten"><h1>Ein Stück Vielfalt</h1><p><small>Kuchen &amp; Torten</small></p></a></li>  
		  	<li><a href="speisen.html" title="Speisen"><h1>Gaumenfreu(n)de</h1><p><small>Kleine &amp; große Speisen</small></p></a></li>    	  
          	<li><a href="eis.html" title="Link zu unserer Eiskarte"><h1>Fruchtiges<br />in Kugelform</h1><p><small>Unsere Eiskarte</small></p></a></li>  
          	<li><a href="getraenke.html" title="Link zu unserem Getränkesortiment"><h1>Mit Leib und Kehle</h1><p><small>Kaffee, Tee und andere Getränke</small></p></a></li>  
      	</ul>

und das relevante CSS:

ul#speisenavi {  
	font-family: Georgia, serif;  
	font-size: 14px;  
	font-weight:bold;  
	text-align:center;  
	text-transform:uppercase;  
	text-decoration: none;  
	letter-spacing: 2px;  
	line-height:155%; /*Abstand zwischen h1 und small bei Hier Bin Ich*/  
	color:#999999;  
	padding-left:20px;  
	}  
	  
ul#speisenavi h1 {  
	font-family: Georgia, serif;  
	font-size: 14px;  
	font-weight:bold;  
	text-align:center;  
	text-transform:uppercase;  
	text-decoration: none;  
	letter-spacing: 2px;  
	line-height:110%;  
	color:#999;  
	}  
	  
ul#speisenavi a h1 {  
  	text-decoration: none;  
	color:#CC0000;  
	font-size: 14px;  
  }  
  
ul#speisenavi a:link h1, ul#speisenavi a:visited h1{  
	color: #CC0000;  
	}  
  
ul#speisenavi a:focus h1, ul#speisenavi a:hover h1, ul#speisenavi a:active h1 {  
	color: #999999;  
  }  
	  
ul#speisenavi li {  
  	display: block;  
	padding-bottom:2em; /*Abstand zwischen Listenelementen*/  
}  
  
ul#speisenavi li img {  
	display:block;  
	margin: 0px auto;  
	margin-top:-13px; /*Abstand zwischen Ornamentbild und kleinem Text bei Hier Bin Ich*/  
	margin-bottom:-9px; /*Abstand zwischen Ornament img und folgendem Listenelement*/  
	}  
  
ul#speisenavi small {  
	font-size: 14px;  
	text-transform:none;  
	letter-spacing: 0px;  
	font-weight:normal;  
	font-style:italic;  
	text-decoration: none;  
	color: #999999;  
  }  
  
ul#speisenavi a small {  
	color:#666666;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi.gif);  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }  
  
ul#speisenavi a:link small, ul#speisenavi a:visited small {  
	color: #666666;  
	padding:1.7em; /*verändert Abstand zu Ornament bei links*/  
	}  
  
ul#speisenavi a:focus small, ul#speisenavi a:hover small, ul#speisenavi a:active small {  
	color: #999999;  
	background-image:url(../images/speisengetraenke/ornament_speisenavi2.gif);  
	background-repeat:no-repeat;  
	background-position:bottom;  
  }  
  
ul#speisenavi li p {  
	margin-top:1px; /*Abstand zwischen h1 und small*/  
	}

Ich habe alles mögliche versucht; oder eben doch nicht das richtige. Auf jeden Fall komme ich an dieser Stelle nicht weiter und wäre überglücklich, wenn Ihr mal drüberschauen könntet!

Es ist doch sinnvoll, diese Navigation als Liste mit display=block anzulegen, oder? Oder doch lieber jeden Link in ein separates <div> setzen?

Vielen Dank für Eure Hilfe schon mal!