Zeilenumbruch im Sub-Menü

[Roland]

Gumo!

Ich habe ein kleines Problem mit meinem css-Klappmenü.
Die Untermenüpunkte, welche sich erst beim mouseover auf den jeweiligen Hauptmenüpunkt aufklappen sollen, weisen bei Inhalten, die aus mehreren Wörtern bestehen Umbrüche auf. D.h. das 2. Wort rutscht in die nächste Zeile.
Schreibe ich also als Untermenüpunkt "Termin 1" passiert genau dieser Effekt. Versehe ich "Termin 1" mit einem _ also "Termin_1" gibt es (natürlich) keinen Umbruch.

Wo muss ich da in css ansetzen um den Umbruch auszuschalten?

Hier mal ein code-Beispiel und darunter die css-Syntax.

----html----------------------------

<ul>
    <li><h2>Termine</h2>
      <ul>
      <li><a href="#">Termin 1</a></li>
      <li><a href="#">Termin 2</a></li>
       </ul>
    </li>
    </ul>

----css------------------------------

#menu { width: 100%; float: left; }

#menu ul { list-style: none; margin: 0; padding: 0; width: auto; float: left;
    }

#menu a, #menu h2
      {
font: normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
display: block;
margin: 0;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
}

#menu h2 {
color: #FFF;
text-transform: uppercase;
background-color: #024E99;
    }

#menu a {
color: #FFF;
text-decoration: none;
background-color: #024E99;
text-transform: uppercase;
}

#menu a:hover {
color: #FFF;
background-color: #01366B;
font-weight: normal;
}

#menu li {position: relative;}

#menu ul ul { position: absolute; z-index: 500; }

#menu ul ul ul { position: absolute; top: 0; left: 100%; }

div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
      {display: none;}

div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
      {display: block;}

[Der Martin]

Moin,

Ich habe ein kleines Problem mit meinem css-Klappmenü.
Die Untermenüpunkte, welche sich erst beim mouseover auf den jeweiligen Hauptmenüpunkt aufklappen sollen, weisen bei Inhalten, die aus mehreren Wörtern bestehen Umbrüche auf. D.h. das 2. Wort rutscht in die nächste Zeile.

ja, das ist eine Nebenwirkung von float ohne Breitenangabe:

#menu ul { list-style: none; margin: 0; padding: 0; width: auto; float: left;
    }

Dadurch wird die Liste (das ul-Element) so schmal wie möglich, enthaltener Text wird umgebrochen. Gib dem ganzen Gefüge hier noch eine Breite.

So long,
 Martin

[Roland]

Hallo Martin,

das Problem ist, wenn ich dem Gefüge an der von dir zitierten Stelle eine vordefinierte Breite gebe, erscheinen die Hauptmenüpunkte ebenfalls in einer festen Breite, diese sollen aber jedoch eine flexible Breite, ausgerichtet an der Zeichenlänge des Hauptmenüpunktes haben...

[Cheatah]

Hi,

Wo muss ich da in css ansetzen um den Umbruch auszuschalten?

an einer geeigneten Stelle. Dieser teilst Du mit, dass Du bei einem white-space nowrap haben willst.

Cheatah

[Roland]

Vielen Dank!

Das war genau der Befehl, der mir gefehlt hat. Problem gelöst!

[Cheatah]

Hi,

Das war genau der Befehl, der mir gefehlt hat.

Sitz!

Problem gelöst!

Nächstes Problem gelöst: Die Anzahl der Befehle, die CSS kennt, ist mit der identisch, die HTML kennt, und beläuft sich auf 0. Was Du meinst, nennt sich Deklaration, Eigenschaft oder Wert, je nachdem worauf genau Du Dich beziehst.

Cheatah

[Peter Pan]

Hi!

Die Anzahl der Befehle, die CSS kennt, ist mit der identisch, die HTML kennt, und beläuft sich auf 0.

Es ist sehr gut, dass Deine missionarischen Erfolge *weit* oberhalb dieser Grenze liegen, aber: manche wollen einfach nur eine Lösung;-)

Ich finde solche Anliegen auch vollkommen ok und OP hat sich nett bedankt - wenn er mehr wissen will, wird er irgendwann danach fragen - JKINW.

off:PP