<ul id="menue">

<li><a href="http://www.riekmund.com/about.html"><img src="about.gif" alt="about"></a></li>
<li><img src="collections_shop.png" alt="collections and shop">
<ul id="menue ul">
<li><a href="http://www.riekmund.com/collectionsandshop.html" class="class2" >new collection</a></li>

  
Die Struktur ist so weit korrekt. Jedoch:  
  
- "menue ul" ist wegen des Leerzeichens keine gültige ID. "menue\_ul" wäre eine, aber dieses Element braucht derzeit überhaupt keine eigene ID, denn du erreichst es genauso gut über die ID der übergeordneten Liste #menue.  
  
- Du hast da noch eine nichtssagende Klasse class2 (wenn sie nicht sogar ebenfalls gänzlich überflüssig ist).  
  

> #menue {  
>  		margin:0px auto;  
>  		padding:0px;  
>  		list-style-type: none;  
> 	}  
> 	  
> #menue li {  
>         display:inline;  
>         margin:0px;  
>     }  
  
Hier musst du aufpassen. Die Regel "#menue li" passt auf sämtliche (!) li, die sich irgendwo unterhalb des Elements #menue befinden. Das gilt also sowohl für die li-Elemente der Liste menue selbst, als auch für die li-Elemente der Untermenü-Liste!  
Die Elemente des Untermenüs sollen aber nicht in einer Reihe (inline), sondern untereinander erscheinen.  
  
Ändere die Regel in "#menue > li". Der Pfeil bewirkt, dass sich die Regel nur auf die direkten Kinder bezieht.  
  

> #menue li a:link {  
>         padding: 0px;  
>         color: #4b4949;  
>         opacity: 0.3;  
>         height: 1%;  
>     }  
  
height wirkt nicht auf inline-Elemente. a ist ein solches.  
  

> #menue ul li {  
>         padding: 0px;  
>         margin: 5px;  
>         width: 50%;  
>         color: #4b4949;  
  
Du verwendest an mehreren Stellen dieselbe Farbangabe. Du kannst die Farbe auch einmalig bei #menue setzen, sie wird an alle Kindelemente vererbt.  
Ähnliches gilt für die Schriftfamilie und -größe und noch ein paar Eigenschaften mehr.  
  

> #menue ul li a:hover {  
>         display:block;  
  
Beim Überfahren des Elements die display-Eigenschaft zu ändern, halte ich für unklug, weil an der display-Eigenschaft wesentliche Eigenarten der Positionierung des Elements hängen. Was vorher brav in einer Zeile nacheinander weglief, verteilt sich dann mit einem Male über die gesamte Seite …  
  

> Width soll für die gesamte horizontale Menübreite stehen. Height war jetzt nur zum ausprobieren, was passiert,...  
  
width und height brauchst du eigentlich gar nicht. Du kannst die Menüs mit bottom und right positionieren (zusammen mit position:absolute o.ä.) und den Rest dem Browser überlassen. Die Menüs breiten sich dann von alleine so aus, dass sie schön auf den Bildschirm passen, egal, welche Ausmaße Bildschirm und Schrift haben.  
  

> Ich frage mich, warum trotz "display:inline" die Elemente im großen Menü nicht nebeneinander stehen (und überhaupt: warum sie so überdimensional groß sind)?!  
  
Wie Felix schon schrieb, sind deine Textgrafiken riesig; collections & shop ist mit 1560 Pixeln gar breiter als mein Monitor. Verkleinere die Grafiken. Dann braucht man auch nicht mehr ein halbes Megabyte für fünf Wörter runterladen …  
  

> Ich habe auch versucht, die einzelnen Menüpunkte des großen Menüs ins CSS zu verfrachten wie auf dieser Seite beschrieben:  
>   
> <http://studentwebhosting.com/tutorials/css-based-menu-with-images/>  
  
Die Lösung ist insofern nicht mehr aktuell, als dass dort Text in einer Standardschrift als Grafik geladen wird (anstatt als echter Text). Diese Anzeige kann man mit heutigen Browsern auch ohne Textgrafiken lösen, lediglich die kleinen Piktogramme wären Grafikelemente.  
Die Floaterei hat, davon abgesehen, auch so ihre Nachteile.  
  
Vergiss das.  
  
  
Hast du dir in deinem Browser die Entwicklerwerkzeuge angeschaut? Bei Firefox stecken sie im Menü unter eben diesem Namen, es gibt auch eine Erweiterung namens [Firebug](https://getfirebug.com/). Andere Browser bieten Ähnliches.  
Meist lässt sich auch mit Rechts auf ein Element in der Webseite klicken und dann etwas à la "Element untersuchen" auswählen.  
  
Du bekommst dort die gesamte Seite als Baum aus HTML-Elementen angezeigt, so, wie der Browser sie intern vorhält, und kannst für jedes Element die CSS-Eigenschaften einsehen und vor allem auch ändern.  
Das ist superpraktisch zum Ausprobieren, da du die zugrundeliegenden Dateien nicht ändern brauchst. Du öffnest die Seite, bastelst im Browser die CSS-Sachen zurecht und erst, wenn's passt, übernimmst du das Gewünschte in die Datei.  
Verzettelst du dich zwischendrin, brauchst du die Seite nur neu zu laden und kannst ohne Umstände da wieder anfangen, wo noch alles in Ordnung war.