2 Stufiges Menü mit CSS

[extremo]

Hallo zusammen...

Ich hab hier folgendes Problem:

Ich habe ein Menü mit 2 Stufen (horizontal). Sobald jemand auf die erste Stufe klickt, klappt die 2. aus und bleibt auch stehen. Soweit so gut, das hab ich alles hinbekommen.

Wenn ich aber jetzt in der 2. Stufe auf einen Link klicke, möchte ich das die 2. Stufe immernoch stehen bleibt... Und auch die Schriftarten sollten statt gelb auch grau sein... Ich hab euch unten mal 2 Printscreens und den CSS und HTML Code reingepackt.

Ich hoffe Ihr könnt mir weiterhelfen, bin schon halb am verzweifeln... :-)

HTML:

<div id="menu">
<ul>
<li><a href="index.php/kontakt.html" title="Kontakt">Kontakt</a>
<ul>
<li><a href="index.php/geschaeftsfuehrung.html" title="Geschäftsführung">Geschäftsführung</a></li>
<li><a href="index.php/adresse.html" title="Adresse">Adresse</a></li>
<li><a href="index.php/anfrage.html" title="Anfrage">Anfrage</a></li>
<li><a href="index.php/standort.html" title="Standort">Standort</a></li>
</ul>
</li>
<li><a href="index.php/info.html" title="Info">Info</a>
<ul>
<li><a href="index.php/veranstaltungen.html" title="Veranstaltungen">Veranstaltungen</a></li>
<li><a href="index.php/pipettor-info.html" title="Pipettor-Info">Pipettor-Info</a></li>
</ul>
</li>
<li><a href="index.php/produkte.html" title="Produkte">Produkte</a>
<ul>
<li><a href="index.php/oem-pipettoren.html" title="OEM-Pipettoren">OEM-Pipettoren</a></li>
<li><a href="index.php/massgeschneidert.html" title="Massgeschneidert">Massgeschneidert</a></li>
</ul>
</li>
<li><a href="index.php/kompetenzen.html" title="Kompetenzen">Kompetenzen</a>
<ul>
<li><a href="index.php/betreuung-von-a-z.html" title="Betreuung von A-Z">Betreuung von A-Z</a></li>
<li><a href="index.php/entwicklung.html" title="Entwicklung">Entwicklung</a></li>
<li><a href="index.php/qualitaet.html" title="Qualität">Qualität</a></li>
</ul>
</li>
<li><a href="index.php/unternehmen.html" title="Unternehmen">Unternehmen</a>
<ul>
<li><a href="index.php/philosophie.html" title="Philosophie">Philosophie</a></li>
<li><a href="index.php/mitarbeiter.html" title="Mitarbeiter">Mitarbeiter</a></li>
<li><a href="index.php/karriere.html" title="Karriere">Karriere</a></li>
</ul>
</li>
</ul>

</div>

CSS:

#menu {
	width: 800px;
	height: 380px;
	position: absolute;
	margin: 0;
	padding: 0;
  background-image: url("tl_files/***/images/background-menu.jpg");
	background-repeat: repeat-x;
	font-weight: bold;
	font-size: 14px;
	list-style-type: none;
}
#menu .active a {
	color: rgb(251,189,26);
}
#menu a {
	text-decoration: none;
	color: rgb(76,76,78);
}
#menu a:hover {
	text-decoration: none;
	color: rgb(251,189,26);
}
#menu ul {
	margin: 0 28px 0 0;
	padding: 0;
	list-style-type: none;
}
#menu .active ul {
	top: 28px;
	position: absolute;
	display: block;
	text-align: left;
	left: 0px;
}
#menu .active {
	background-color: rgb(255,255,255);
	color: rgb(251,189,26);
}
#menu li {
	width: 115px;
	height: 30px;
	float: right;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
}
#menu li ul {
	display: none;
}
#menu li ul li {
	width: 200px;
	float: none;
	padding-left: 27px;
	text-align: left;
}

Bilder:



Ich danke schon jetzt für eure Tips!

Liebe Grüsse
Extremo

 

[threadi]

Wenn Du z.B. den Link auf "Info" anklickst, musst Du die Datei "index.php/info.html" so anpassen, dass das Menü ausgeklappt bleibt. Am einfachsten ginge das, wenn Du für das <ul> innerhalb von "Info" eine CSS-Klasse setzt die das was Du sonst per hover machst direkt setzt.

<ul class="aktuell">

#menu li ul.aktuell { display: block; }

 

[extremo]

Hallo threadi,
vielen Dank für deine Antwort!

Ich werde das mal so testen und gebe euch dann bescheid.

Liebe Grüsse
Extremo