kingofrap: Ausklappbares Menü mit CSS

Beitrag lesen

Hallo allerseits,

ich habe mir eine Seite gebastelt:

Code von index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WP-Informatik</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body text="#666666">

<p>&nbsp;</p>
<table width="80%" align="center" bgcolor="#FFFFFF">
  <tr>
    <th height="86" colspan="2" scope="col"><img src="image/header.jpg" alt="" width="539" height="112" /> </th>
  </tr>
  <tr>
    <td width="22%" height="265">

<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
        <tr>
          <td width="165">&nbsp;</td>
        </tr>
        <tr>
          <td width="165"><a href="index.php?foo=home.php" class="navText">Startseite</a></td>
        </tr>
        <tr>
          <td width="165"><a href="index.php?foo=about.php" class="navText">&Uuml;ber uns </a></td>
        </tr>
        <tr>
          <td width="165"><a href="index.php?foo=projekte.php" class="navText">Projekte</a></td>
        </tr>
  <tr>
          <td width="165"><a href="index.php?foo=wp.php" class="navText">Wahlpflichtfach</a></td>
        </tr>
  <tr>
          <td width="165"><a href="index.php?foo=informatik.php" class="navText">Informatik</a></td>
        </tr>
        <tr>
          <td width="165"><a href="index.php?foo=links.php" class="navText">Links</a></td>
        </tr>
        <tr>
          <td width="165"><a href="index.php?foo=impressum.php" class="navText">Impressum</a></td>
        </tr></th>
    <th width="65%" scope="col">&nbsp;</th>
  </tr>
</table>
 <th colspan="3" scope="col"><p>
 <style type="text/css">
<!--
.Stil2 {color: #666666}
-->
</style>
<div style="width: 510; overflow: auto;">

<h3 align="left" class="Stil1">>>Startseite</h3>

<p>

<a><strong>Herzlich Willkommen</strong></a> </p>
<p>Auf der Homepage des 9er Informatikkurses der <a target="_blank" href="http://www.realschule.lohmar.de">Realschule Lohmar</a></p>
<p><img src="image/school.jpg" width="486" height="296" /></p>

Sie sind der

833
. Besucher!

</div>
      </p>    </th>
  </tr>
</table>
</body>
</html>

Code von style.css:

body {
 margin:0px;
 background-color: #666666;
 border-bottom-style: none;

}

td {
 font:11px Arial, Helvetica, sans-serif;
 color:#FFFFFF;
 }

a {
 color: #666666;
 }

a:hover {
 color: #666666;
 background-color: #FFFFFF;
 }

img { border: 0px;
background:#FFFFFF }

.Stil1 {color: #000000}

#navigation td {
 border-bottom: 1px solid #666666;
 }

#navigation a {
 font: bold 11px Arial, Helvetica, sans-serif;
 color: #666666;
 line-height:16px;
 letter-spacing:0.1em;
 text-decoration: none;
 display:block;
 padding:8px 6px 10px 20px;
 background-color: #FFFFFF;
 }

#navigation a:hover {
 color:#FFFFFF;
 background-color: #666666;
 }

#tagline  {
 font:11px Arial, Helvetica, sans-serif;
 color: #666666;
 letter-spacing:0.4em;
 line-height:18px;
 }
#navigation .navText Stil3 {
 color: #666666;
 background-color: #FFFFFF;
}

Ich würde mich echt freuen wenn mir einer helfen könnte dieses Menü zur Seite ausklappbar zu machen.
Es sollte ein wenig transparent sein und bei drüberfahren über die hauptpunkte sichtbar und unsichtbar werden.

Hoffe ihr habt ungefähr verstanden was ich meine.

Vielen Dank für jede Hife im vorraus.

MFG Daniel

P.S. Habe schon alles im Internet was ich gefunden habe ausprobiert aber es klappt leider nicht wie ich möchte.