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;}