Thema: automatischer Zeilenumbruch im horizontalen Menü

Hallo,
ich hab jetzt seit Tagen das Forum durchstöbert und alle möglichen Lösungsansätze probiert, aber es hat nicht funktioniert.

Mein Problem:
Ich habe eine Webpage (momentan noch offline) auf Basis des Templates Kopenhagen mit einem Horizontalen mod_mainmenu. Bei diesem wird das Submenü als drop-down-Menü dargestellt, also wenn man auf den Hautpunkt kommt, öffnet sich darunter ein Feld mit dem Submenü.
Manche der Menü-Einträge sind aber zu lang. Ich hab im css schon diverse Sachen ausprobiert. Aber entweder muss ich die Feldbreite sehr groß machen, was dann Probleme mit der Fensterbreite gibt, oder ich habe auch versucht einen automatischen Zeilenumbruch zu machen. Geht auch, nur überschreibt er dann den darunterliegenden Menüeintrag. Man kann also nichts mehr lesen.

Hier mal die template_css (Submenü Teil):

Code:

/* begin MenuSubItem Sub-Top-Menü*/
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: pre-wrap;
	height: 20px;
	width: 180px; 
	overflow: visible; 
	line-height: 12px; 
	margin-right: 1px; 
	background-image: url('../images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #5C5C5C;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
.art-menu ul ul a
{
	margin-left: auto;
}
.art-menu ul li a:hover
{
	color: #0684B1;
	background-position: 0 -20px;
}
.art-menu ul li:hover>a
{
	color: #0684B1;
	background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #0684B1;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #0684B1;
}
/* end MenuSubItem */

Ich hoffe es kann mir jemand helfen.
Vielen Dank!!

Guten Tag,

da vermute ich mal ganz stark, das dies am span Tag liegt.

In Deinen obigen Code hat der .art-menu ul a einen text-indent und der .art-menu ul span nicht. Dies brauch er auch nicht, solange kein Zeilenumbruch statt gefunden hat!

Entweder gibst Du beiden ein text-indent:0; und arbeitest mit einem margin-left oder du gibst dem .art-menu ul span auch einen Text-indent, so wie der .art-menu ul a

Versuch macht klug ... da Du die Seite ja noch offline hast.

Gruss Ralf