✔ Menü mit Unterpunkten

[Nikke123]

Hallo leute,

Ich muss ein Menü mit Unterpunkten erstellen. Das Problem ist aber dass die Unterpunkte erst sichtbar sein sollen, wenn man auf den Menüpunkt geklickt hat. Das ganze sieht so aus:

			<ul id="menu">
				<li style="border-top: 1px gray solid;"><a href="index.html"> Startseite </a></li>
				<li><a href="models.html"> Über Uns </a></li>
				<li><a href="#"> Unsere Models </a>
					<ul>
					<li><a href="#"> Male</li>
					<li><a href="#"> Female </li>
					</ul>
				</li>
				<li><a href="models.html"> Kontakt </a></li>
				<li><a href="models.html"> Impressum </a></li>
			</ul>

ul#menu{
	width: 200px;
	height: 430px;
	margin: 30px 5px 0px -8px;
	float: left;
	font-size: 16px;
	}

ul#menu li{
	margin: 0;
	padding: 1em;
	list-style: none;
	margin-left: 10px;
	border-bottom: 1px gray solid;
	}
	
#menu li:active ul li{
	display: block;
    }
	
#menu ul li{
	display: none;
	border: 0;
	}

ul#menu li:hover{
	background-color: #E6E6E6;
	}

ul#menu a:link{
	display: block;
	font-weight: bold;
	color: black;
	text-decoration: none;
	}
	
ul#menu a:visited{
	display: block;
	font-weight: bold;
	color: black;
	text-decoration: none;
	}

Das ganze mit "active" klappt auch. Aber ich möchte das gerne ungefähr so haben:

#menu li:visited ul li{}

Geht das? Wenn ja wie?

Danke schonmal im Vorraus

MFG
Niklas

 

[timestamp]

Ob das mit CSS möglich ist, weiß ich nicht. Mit Javascript aber schon:

<script type="text/javascript">
function expand(id){
  document.getElementById(id).style.display = 'block';
}
</script>

<!-- [...] -->

<ul>
  <li><a href="#" onclick="expand('submenu1');">Klick ich</a>
  <ul id='submenu1' style="display: none">
    <li>Submenu</li>
  </ul>
  </li>
</ul>

 

[genodeftest]

Wenn du dir das Menü zu http://www.oracle.com/technetwork/java/index.html ansiehst, klappt es dort auch ohne JavaScript beim hovern.

 

[Jan-Frederik Stieler]

Hi,
per :hover ist das möglich. Den Event-Handler onClick jedoch kannst du nur per javascript abfragen.
http://de.selfhtml.org/javascript/sprache/eventhandler.htm

Viele Grüße