Hallo,
kann mir Jemand sagen wie ich ein einfaches tree menu mache mit <ul>. Folgenden Ansatz habe ich soweit.
Das ganze klappt soweit schon. Allerdings würde ich gerne das die Unterpunkte erst ausfahren wenn man eine Kategorie "anklickt". Das mit dem "hover" sieht irgendwie sehr unruhig aus.
Gibt es da ne Möglichkeit ohne JavaScript zu benutzen für ?
kann mir Jemand sagen wie ich ein einfaches tree menu mache mit <ul>. Folgenden Ansatz habe ich soweit.
HTML:
<html>
<head>
<style>
#navigation { margin:0 90px 0 0;width:200px;height:500px;float:left; }
#nav {
width: 220px;
list-style: none;
}
#nav .head {
font: normal 18px/18px Arial, Helvetica, sans-serif;
line-height:120%;
text-transform:uppercase;
color: #FFF;
background:#4f5559;
padding: 5px 0 5px 10px;;
margin: 0 0 10px 0;
}
#nav li ul {
display:none;
list-style:none;
}
#nav li a {
font: normal 18px/18px Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform:uppercase;
line-height:150%;
color: #4f5559;
margin: 0 0 0 20px;
}
#nav li ul li{
border:none;
}
#nav ul li a {
font: normal 16px/16px Arial, Helvetica, sans-serif;
text-transform:uppercase;
display:block;
text-decoration: none;
margin: 0 0 0 30px;
line-height:150%;
}
#nav li:hover ul, li.over ul { display:block}
</style>
</head>
<body>
<!-- NAVIGATION START -->
<nav id="navigation">
<ul id="nav">
<li><h3 class="head">Headline</h3></li>
<li><a href="#">Kategorie</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
<!-- NAVIGATION END -->
</nav>
</body>
</html>Gibt es da ne Möglichkeit ohne JavaScript zu benutzen für ?
