Semantik

[1UnitedPower]

Meine Herren,

Die Grafik/Bild zu 1 ist in meinem Forum als Navigation aktiv.

Das entsprechende HTML dazu:

<ul id="Navigation">  
    <li><a href="http://www.projekt-baby.de/portal.html"><font face="Calligraffiti" size="5"><b>Portal</b></font></a></li>  
    <li><a href="http://www.projekt-baby.de/"><font face="Calligraffiti" size="5"><b>Forum</b></font></a></li>  
    <li><a href="http://www.projekt-baby.de/gallery.php"><font face="Calligraffiti" size="5"><b>Bildergalerie</b></font></a></li>  
    <li><a href="http://www.projekt-baby.de/page-entbindungstermine.html"><font face="Calligraffiti" size="5"><b>Kugelbauch-Liste</b></font></a></li>  
    <li><a href="http://www.projekt-baby.de/page-forumkinder.html"><font face="Calligraffiti" size="5"><b>Forumkinder</b></font></a></li>  
</ul>

Du solltest als erstes alle font-Elemente entfernen, die gibt es seit HTML4.01 nämlich nicht mehr. Die b-Elemente dienen auch nur dem Design und sind deshalb auch Fehl am Platz. Die Schriftart, bzw. Schrift-Gewichtung kannst und solltest du mit CSS festlegen. Siehe dazu die Serie Der Weg zu HTML5 aus dem selfhtml-Blog. Darüber hinaus kannst du aus dem Artikel auch andere Auszeichnungen für deine Seitenstruktur mitnehmen, die ich in dieser Antwort unerwähnt lasse.

Wenn man mit der Maus, über Kugelbauch-Liste fährt, sollte sich
das Bild/Grafik zu 2 öffnen und ein Untermenü sichtbar sein!
Wie Du es schon geschrieben hast, als Dropdownmenü.

Diese Unternavigation musst du erstmal in deine Dokument-Struktur einfügen, als Unterliste.

Ein Beispiel, wie man ein so verschachteltes Menü mit CSS gestalten kann findest du im selfhtml-Wiki.

Dabei sind aber verscheide Abwägungen zu machen: Wie soll sich das Menü zum Beispiel bei Smartphones und Tablets verhalten? Dort gibt es keinen Mauszeiger.

Das Sprechblasen-Design deines Untermenü-Punktes kannst du übrigens auch ganz ohne Bilder umsetzen: http://www.sitepoint.com/pure-css3-speech-bubbles/