Expanderande lista

[annaco]

Jag vill göra en expanderande lista där underliggande meny öppnas när man klickar på den länk som man är intresserad av.
Just nu öppnas listan så fort jag för musen över länkarna men så vill jag inte ha det.
Hittar inget bra exempel på hur jag ska göra.
Är nybörjare på Javascript men har förstått att det är onclick jag borde använda men får inte till något som fungerar.


Så här ser en del av listan ut nu.
<li>
<a href="tradgardar.html">Sevärda trädgårdar</a>
<ul class="subMenu">
<li><a href="angermanland.html">Ångermanland</a></li>
<li><a href="dalarna.html">Dalarna</a></li>
<ul>
<li><a href="tradgardarleksand.html">Leksand</a></li>
</ul>
<li><a href="gavleborg.html">Gävleborg</a></li>
<ul>
<li><a href="tradgardargavle.html">Gävle</a></li>
</ul>
<li><a href="orebro.html">Örebro län</a></li>
<ul>
<li><a href="tradgardaraskersund.html">Askersund</a></li>
</ul>
<li><a href="sodermanland.html">Södermanland</a></li>
<ul>
<li><a href="tradgardarjulita.html">Julita</a></li>
<li><a href="tradgardarstockholm.html">Stockholm</a></li>
</ul>
</ul>
</li>

[prplxr]

Vi behöver mer kod än sådär. Det där är bara själva markup'en och har ingen sådan funktionalitet du beskriver i sig.

[annaco]

Sorry, det gick lite för fort. Här kommer övrig kod.

css:

[kod]ul#Submenu {
list-style-type: none;
margin: 100px;
padding: 100px;
}

ul#Submenu li aink, ul#nav li a:visited {
display: block;
width: 120px;
height: 18px;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
}

#nav, #nav .subMenu, ul#nav li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul#nav li {
width: 200px;
background-color: #ffffff;
color: black;
font-family: "Trebuchet MS", Arial, Sans-serif;
font-size: 15px;
}
ul#nav li ul.subMenu li {
background-color: #ffffff;
}
ul#nav li ul.subMenu li aink, ul#nav li ul.subNav li a:visited {
display: block;
height: 20px;
color: black;
text-decoration: none;
}
ul#nav li ul.subMenu li aover, ul#nav li ul.subNav li a:active {
background-color: yellow;

}

ul#nav>li {
height: 20px;
overflow: hidden;
line-height: 20px;
}

ul#nav liover, ul#nav li:active {
height: auto;
overflow: auto;
}

<ul id="nav">
<li>
<a href="annastradgard.html">Startsida</a>
</li>
<li>
<a href="fakta.html">Fakta</a>
<ul class="subMenu">
<li><a href="design.html">trädgårdsdesign</a></li>
<li><a href="jord.html">Jorden</a></li>
<li><a href="odling.html">Odling</a></li>
<li><a href="plantering.html">Plantering</a></li>
<li><a href="problem.html">Problem i trädgården</a></li>
<li><a href="vaxter.html">Växter</a></li>
</ul>
</li>
<a href="tradgardar.html">Sevärda trädgårdar</a>
<ul class="subMenu">
<li><a href="norrland.html">Norrbotten</a></li>
<li><a href="vasterbotten.html">Västerbotten</a></li>
<li><a href="jamtland.html">Jämtland</a></li>
<li><a href="harjedalen.html">Härjedalen</a></li>
<li><a href="medelpad.html">Medelpad</a></li>
<li><a href="angermanland.html">Ångermanland</a></li>
<li><a href="dalarna.html">Dalarna</a></li>
<ul>
<li><a href="tradgardarleksand.html">Leksand</a></li>
</ul>
<li><a href="gavleborg.html">Gävleborg</a></li>
<ul>
<li><a href="tradgardargavle.html">Gävle</a></li>
</ul>
</ul>
</li>
</ul>[/kod]

Listan är väldigt lång så jag har förkortat den en hel del men funktionen är den samma på hela.

Hur ska jag göra om den för att listan bara ska öppnas när jag klickar på länkarna?

[@nders]

Hej!

Använd [kod]-taggar när du postar kod, så är det lättare för oss att läsa.
Jag redigerade in i ditt inlägg ovan.

mvh

[voigtann1]

Din HTML struktur är felaktig, du har ett a-element direkt under en ul

men om du har en liknande struktur:

[kod]<ul id="nav">
<li><a href="annastradgard.html">Startsida</a></li>
<li>
<a href="fakta.html">Fakta</a>
<ul class="subMenu">
<li><a href="design.html">trädgårdsdesign</a></li>
<li><a href="jord.html">Jorden</a></li>
<li><a href="odling.html">Odling</a></li>
<li><a href="plantering.html">Plantering</a></li>
<li><a href="problem.html">Problem i trädgården</a></li>
<li><a href="vaxter.html">Växter</a></li>
</ul>
</li>
<li>
<a href="tradgardar.html">Sevärda trädgårdar</a>
<ul class="subMenu">
<li><a href="norrland.html">Norrbotten</a></li>
<li><a href="vasterbotten.html">Västerbotten</a></li>
<li><a href="jamtland.html">Jämtland</a></li>
<li><a href="harjedalen.html">Härjedalen</a></li>
<li><a href="medelpad.html">Medelpad</a></li>
<li><a href="angermanland.html">Ångermanland</a></li>
<li><a href="dalarna.html">Dalarna</a>
<ul>
<li><a href="tradgardarleksand.html">Leksand</a></li>
</ul>
</li>
<li><a href="gavleborg.html">Gävleborg</a></li>
<li><a href="tradgardargavle.html">Gävle</a></li>
</ul>
</li>
</ul>[/kod]

och ta bort hover i din CSS så löser du det rätt enkelt med jQuery, något i denna stil:
[kod]$("#nav aas(~ul.subMenu)").click(function(e){
e.preventDefault();
$(this).next().slideToggle(600);
});[/kod]
Demo: http://jsfiddle.net/Vrtkb/ om du har underkategorier så: http://jsfiddle.net/Vrtkb/1/