Menü mit Unterpunkten

Nikke123

Mitglied
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:
PHP:
			<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>
PHP:
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:
PHP:
#menu li:visited ul li{}
Geht das? Wenn ja wie?

Danke schonmal im Vorraus

MFG
Niklas
 

timestamp

Mitglied Käsekuchen
Ob das mit CSS möglich ist, weiß ich nicht. Mit Javascript aber schon:
HTML:
<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>