#leftmenu ul {  
	margin: 0;   
	padding: 0;
	list-style-type: none;    
}

#leftmenu li {  
	text-decoration: none;
	font: normal 13px Arial, Helvetica, Verdana, sans-serif; 
	padding: 5px 0 5px 30px;    
}

#leftmenu li a {  
	text-decoration: none;   
}

#leftmenu li a:hover {   
	color: red;    
}

#leftmenu li a {     
	color: #000000;     
} 

#leftmenu li.ACT, 
#leftmenu li.CUR {   
	background: url(../img/leftmenu-bg.gif) no-repeat;       
	font-weight: bold;    
	color: #000000;     
}

Die weiteren Ebenen können formatiert werden, indem man Kopien dieser Struktur anlegt und die Tags „li“ austauscht mit „li li“ für die zweite, „li li li“ für die dritte Ebene und so weiter.

Übrigens hat die Verwendung von CSS-Menüs weitere Vorteile gegenüber der Originalseite:

• Mit der Struktur verschachtelter Linklisten wird das Menü auch für Besucher mit Sehbehinderungen zugänglich.
• Die Menüeinträge sind Textlinks, während das Menü der Originalseite mit Bildern erzeugt wird. Dadurch lädt die Seite nicht nur viel schneller, sondern das Menü kann auch von Suchmaschinen erfasst werden.

Zum Thema Suchmaschinen: Mit CSS gibt es weitere Methoden, die Indexierung und die Positionierung der Seite zu verbessern. Der Content kann an den Anfang der Seite gerückt werden, um dessen Relevanz zu erhöhen. Dazu wird im HTML-Template der „content“-Container vor allen anderen Containern platziert. Damit verändert sich die Reihenfolge bei der Code-Erzeugung der Webseite. Die Positionierung der Elemente auf dem Bildschirm wird – unabhängig von der Reihenfolge beim Rendering – über die CSS-Datei gesteuert. Für den Besucher sieht die Webseite exakt so aus wie vorher, für Suchmaschinen allerdings nicht:

<div id="content"> </div>
<div id="header"> 
    <div id="logo"> </div>
    <div id="topmenu"> </div>
</div>
<div id="header2">
    <div id="header-image"> </div>
    <div id="header-text"> </div>
</div>
<div id="left">
    <div id="leftmenu"> </div>
    <div id="search"> </div> 
</div>

Die Suchfunktion wird auf allen Seiten unterhalb des linken Menüs eingebunden. Dazu wird das Typoscript-Modul „Workshop: Suchfunktion“ eingebunden. Dies enthält ein HTML-Formular, das beim Absenden auf die Seite mit den Suchergebnissen verzweigt. Dort ist im Content ein Plugin „Indexsuche“ enthalten. Damit auf der Ergebnisseite nicht zwei Formulare zum Eingeben von Suchbegriffen sind, wird über ein Extension-Template auf dieser Seite die Suchfunktion ausgeblendet, indem das TypoScript-Objekt gelöscht wird: