XHTMLforum - CSS Anfänger Probleme

1.Problem:
Ich habe mir ein css Schnipsel für ein Menu mit Untermenus zurechtgebastelt und möchte über das Bild darunter einen Text legen. Wenn ich dies mache, verschwindet aber das Untermenu hinter dem Bild.

URL Problem: Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron

2.Problem:
Des Weiteren würde ich mir wünschen, dass der Obermenupunkt im onmouseover look bleibt wenn der Mauszeiger aufs untermenu wandert.

style css:

@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
border: none;
}

html, body{
font: 100% Arial, Helvetica, sans-serif;
font-size:14px;
height:100%;
padding:0;
margin:0;
border:none;
table { border-collapse:collapse
}
}

input, textarea {
background-color :#F7F7F7;
border:solid 1px;
padding: 2px;
margin: 0px;
}

h1 {
font: 100% Arial, Helvetica, sans-serif;
font-size:18px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color:#a9074d;
}

h2 {
font: 100% Arial, Helvetica, sans-serif;
font-size:100%;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color:#a9074d;
}

#header {
font: 100% Arial, Helvetica, sans-serif;
color:#a9074d;
padding:0;
margin:0;
border:none;
align:center;
}

#footer {
font: 100% Arial, Helvetica, sans-serif;
color:#FFF;
padding:0;
margin:0;
border:none;
font-size:12px;
font-weight:bold;
align:center;
}
#footer a:link,
#footer a:visited {
color:#FFF;
text-decoration: none;
}
#footer a:hover {
color:#FFF;
text-decoration:underline;
}

#contentsitemap {
font: 100% Arial, Helvetica, sans-serif;
color:#000;
align:center;
}
#contentsitemap a:link,
#contentsitemap a:visited {
color:#000;
text-decoration: none;
}

#contentsitemap a:hover {
color:#a9074d;
text-decoration:underline;
}

#content {
font: 100% Arial, Helvetica, sans-serif;
color:#000;
align:center;
}
#content a:link,
#content a:visited {
color:#a9074d;
text-decoration: none;
}
#content a:hover {
color:#a9074d;
text-decoration:underline;
}

<!--
#contentteam {
font: 85% Arial, Helvetica, sans-serif;
color:#000;
}
#contentteam a:link,
#contentteam a:visited {
color:#a9074d;
text-decoration: none;
}
#contentteam a:hover {
color:#a9074d;
text-decoration:underline;
}

#menu {
font-size:14px;
position:absolute;
height:30;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:125px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a{
padding:6px 0px;
border:0px;
border-collapse:collapse;
color:#a9074d;
font-weight:bold;
text-decoration:none;
margin:0;
}
.submenu a{
padding:7px 0px;
border:1px solid:#FFF;
border-collapse:collapse;
color:#a9074d;
font-weight:bold;
text-decoration:none;
margin:0;
}
.submenu a{
font-size:12px;
width:125px;
position:relative;
clear:both; /* special IE6 */
color:white;
background-color:#a9074d
}
#menu a:hover, .topmenu.on a {
color:white;
background-color:#a9074d !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}

.bildmittext {
width: 1000px;
position: relative;
border: 0px;
}

.bildmittext img {
display: block;
}
.bildmittext span {

position: absolute;
bottom: 0;
width: 100%;
color:#FFFFFF;
font-weight:bold;
font-size:60px;
font-color: hsla(0, 0%, 100%, 0.5);
position: absolute;
padding-bottom:0;
padding-right:20px;
width: 100%;
text-align: right;
line-height: 1,5em;
text-shadow: 1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
opacity: 0.75;
}

Navi:

<div id="menu">
<ul>

<li class="topmenu">
<a href="index.php">Home</a>
</li>

<li class="topmenu">
<a href="unternehmen.php">Unternehmen</a>
</li>

<li class="topmenu">
<a href="produktion.php">Produktion</a>
<ul>
<li class="submenu"><a href="labor.php">Labor</a></li>
<li class="submenu"><a href="jungpflanzen.php">Jungpflanzen</a></li>
<li class="submenu"><a href="container.php">Containerfläche</a></li>
<li class="submenu"><a href="freiland.php">Freiland</a></li>
</ul>
</li>

<li class="topmenu">
<a href="sortiment.php">Sortiment</a>
<ul>
<li class="submenu"><a href="hybriden.php">Rhododendron Hybriden</a></li>
<li class="submenu"><a href="yakushimanum.php">Rhododendron yakushimanum</a></li>
<li class="submenu"><a href="zwergformen.php">Rhododendron Zwergformen</a></li>
<li class="submenu"><a href="azalea.php">Knap-Hill Azaleen</a></li>
<li class="submenu"><a href="kalmia.php">Kalmia</a></li>
<li class="submenu"><a href="syringa.php">Syringa</a></li>
<li class="submenu"><a href="pieris.php">Pieris</a></li>
</ul>
</li>

<li class="topmenu">
<a href="marketing.php">Marketing</a>
<ul>
<li class="submenu"><a href="">folgt</a></li>
</ul>
</li>

<li class="topmenu">
<a href="service">Service</a>
<ul>
<li class="submenu"><a href="service_galabau.php">Service für den Garten- und Landschaftsbau</a></li>
<li class="submenu"><a href="gestaltung.php">Gestaltungsideen mit Rhododendron</a></li>
<li class="submenu"><a href="pflege.php">Rhododendron pflanzen & Pflege</a></li>
</ul>

<li class="topmenu">
<a href="kontakt.php">Kontakt</a>
<ul>
<li class="submenu"><a href="kontakt.php">Kontaktformular</a></li>
<li class="submenu"><a href="anfahrt.php">Anfahrt</a></li>
<li class="submenu"><a href="team.php">unser Team</a></li>
</ul>

<li class="topmenu">
<a href="impressum.php">Impressum</a>
</li>

</ul>
</div>

Quelltext Problem Nr.1 (Untermenu verschwindet hinter Bild mit Text)

Beispiel URL: Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron

<div id="header" align="center">
<table width="1000" border="0" align="center" valign="top">
<tr>
<td height="118"><?php
include ("header.php");
?></div></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td height="30" valign="top"><?php
include ("navi2.php");
?></td>
</tr>
<tr>
<td height="300" bgcolor="#a9074d" align="center" valign="center"><div class="bildmittext"><img src="IMG/header_unternehmen.jpg" width="998" height="298" /><span>Home</span></div></td>
</tr>
</table>