✔ 3x Fragen zu CSS Klappmenü

[uran]

Ich habe momentan ein CSS Klappmenü in der Verwendung und hab 2 Anpassungsfragen.

1. Wie mach ich bei den aufgeklappten Unterpunkten den Hintergrund weiß?

2. Ist es möglich einzelne Unterpunkte zweizeilig zu machen? Wenn ja wie?

Hier der CSS-Code:

 ul, li 
{
  	margin:   	  	0;
  	padding:   	  	0;
  	list-style-type:   	none;
}

ul#menue {
	width:  	  	170px;
	margin:   	  	0 0 0 0;
}

ul#menue li a 
{
	margin:   	  	1px 0 0 0;
	height:   	  	15px;
	line-height:   	15px;
	text-align:   	left;
	border:   	  	1px solid #cde9a9;
	background-color:   	#f7fed8;
	display:  	  	block;
	color:  	  	#336600;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding-left: 3px;
}

ul#menue li a + ul.submenue
{
	display:  	  	none;
	background-color: #FFFFFF;
}

ul#menue li a:focus + ul.submenue 
{
	display:  	  	block;
	color:  	  	#fbfeee;
	background-color: #FFFFFF;
}

ul#menue li a:hover 
{
  	color:  	  	#000000;
}

ul#menue li a:active 
{
  	background-color: #839e5b;
	color:  	#FFFFFF;
}

ul#submenue1 li a. ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a, ul#submenue5 li a, ul#submenue6 li a, ul#submenue7 li a, ul#submenue8 li a, ul#submenue9 li a
{
	background-color: #FFFFFF;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

Hier der HTML-Code:

 <ul id="menue">
<li><a href="#" target="mainFrame" onclick="javascript:zeigen('submenue6')">Startseite</a></li>
  	<li><a href="#" onclick="javascript:zeigen('submenue1')">
	<img src="menu_button.gif" width="10" height="10" border="0" /> Aktuelles
      </a>
  	  <ul id="submenue1" class="submenue1">
		  <li><a href="#" target="mainFrame" >-</a></li>
  	  </ul>
</li>  	
  	  	  	
<li><a href="#" onclick="javascript:zeigen('submenue2')"><img src="menu_button.gif" width="10" height="10" border="0" /> Wein, Tourismus &amp; Kultur</a>
  	  	<ul id="submenue2" class="submenue2"></a></li>
            <li><a href="#" target="mainFrame">- Radfreunde, Fähre</a></li>
			<li><a href="#" target="mainFrame">- ///</a></li>
  	  	 	<li><a href="#" target="mainFrame">- ///</a></li>
			<li><a href="#" target="mainFrame">- Hotels</a></li>
            <li><a href="rieslingwinzer.htm" target="mainFrame">- Riesling-Winzer</a></li>
			<li><a href="#" target="mainFrame">- Kurzurlaub &amp; Kultur</a></li>
			<li><a href="#" target="mainFrame">- Radfreunde, Fähre</a></li>
			<li><a href="#" target="mainFrame">- Riesling</a></li>
			<li><a href="#" target="mainFrame">- Weinfeste, Termine</a></li>
  	  	</ul>
</li>  	

  	<li><a href="#" onclick="javascript:zeigen('submenue3')"><img src="menu_button.gif" width="10" height="10" border="0" /> Wirtschaft &amp; Gewerbe</a>
  	  	<ul id="submenue3" class="submenue3">
  	  	  	<li><a href="#" target="mainFrame">- Business</a></li>
  	  	  	<li><a href="#" target="mainFrame">- Bauplätze und Immobilien</a></li>
  	  	</ul>
  </li>

<li><a href="#" onclick="javascript:zeigen('submenue4')"><img src="menu_button.gif" width="10" height="10" border="0" /> Leben

  	  	</a>
  	  	<ul id="submenue4" class="submenue4">
  	  	  	<li><a href="#" target="mainFrame">- Vereine, Schulen, Jugend</a></li>
  	  	  	<li><a href="#" target="mainFrame">- Neubürger</a></li>
			<li><a href="#" target="mainFrame">- Aktuelles Wetter</a></li>
			<li><a href="#" target="mainFrame">- Link-Empfehlungen</a></li>
  	  	</ul>
  </li>
	
<li><a href="#" onclick="javascript:zeigen('submenue5')"><img src="menu_button.gif" width="10" height="10" border="0" /> --</a>
  	  	<ul id="submenue5" class="submenue5">
  	  	  	<li><a href="#">- Kontakt</a></li>
  	  	  	<li><a href="#" target="mainFrame">- E-Mail</a></li>
  	  	</ul>
</li>
<li><a href="#" onclick="javascript:zeigen('submenue6')"><img src="menu_button.gif" width="10" height="10" border="0" /> Kurzinformation</a>
  	  	<ul id="submenue6" class="submenue6">
  	  	  	<li><a href="#" target="mainFrame">- Englisch <img src="gb.gif" width="16" height="11" border="0" /></a></li>
  	  	  <li><a href="#" target="mainFrame">- Französisch <img src="fr.gif" width="16" height="11" border="0" /></a></li>
  </ul>
</li>
<li><a href="#" onclick="javascript:zeigen('submenue7')"><img src="menu_button.gif" width="10" height="10" border="0" /> Links</a><ul id="submenue7" class="submenue7"><li><a href="#" target="_blank">- -</a></li>
      <li><a href="#" target="_blank">- -</a></li>
        <li><a href="#" target="_blank">- #</a></li>
  </ul>
</li>
  
<li><a href="#" target="mainFrame" onclick="javascript:zeigen('submenue8')">#</a>
  <ul class="submenue8">	
	</ul>
</li>

<li><a href="#" target="mainFrame" onclick="javascript:zeigen('submenue9')">Impressum</a></li>
	<ul class="submenue9">	
	</ul>
</ul>

Danke im voraus!

 

[GFX-Händchen]

Zu Frage 1:
Du hast nur einen kleinen Fehler im CSS-Code.

ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a, ul#submenue5 li a, ul#submenue6 li a, ul#submenue7 li a, ul#submenue8 li a, ul#submenue9 li a
{
	background-color: #FFFFFF;
}

Dein Code:

ul#submenue1 li a. ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a, ul#submenue5 li a, ul#submenue6 li a, ul#submenue7 li a, ul#submenue8 li a, ul#submenue9 li a
{
	background-color: #FFFFFF;
}

Es muss also ein Komma und kein Punkt an die Stelle.

Bei Problem 2 sollte folgender Link helfen:
http://de.selfhtml.org/css/eigenschaften/listen.htm

 

[Maik]

Hi.

Du hast nur einen kleinen Fehler im CSS-Code.

Nicht nur dort, sondern auch im HTML-Code:

<li><a href="#" onclick="javascript:zeigen('submenue2')"><img src="menu_button.gif" width="10" height="10" border="0" /> Wein, Tourismus &amp; Kultur</a>
  	  	<ul id="submenue2" class="submenue2"></a></li>

Ist es möglich einzelne Unterpunkte zweizeilig zu machen? Wenn ja wie?

Das geschieht doch automatisch, wenn mehrere Einträge im Menüpunkt vorhanden sind.

Und wie lautet die dritte Frage zu dem Klappemenü? :suspekt:

 

[GFX-Händchen]

Das geschieht doch automatisch, wenn mehrere Einträge im Menüpunkt vorhanden sind.

Nicht bei ihm da er im CSS-Code

ul#menue li a 
{
	height:   	  	15px;}

definiert hat.

Es geht aber mit

ul#menue li a 
{
		height:   	  	auto;}

Also einfach auto anstatt 15px eintragen.

 

[Maik]

Oder so

 

[uran]

Supi danke leute^^. Manchmal sieht man den Wald vor lauter Bäume nicht. Ehm ja die dritte frage hab ich ins Javascript-Forum verschoben. Etwas irrefürende Headline *g*