Dropdown menu in html maken

[wzshop]

Beste,

Ik ben bezig met een dropdown menu in html te maken, zodat de URL's gewoon indexeerbaar zijn voor zoekmachines. Alleen wil het me nog niet echt lukken.

Zie: http://premium-s.nl/test/test.php

*problemen FF:
-als ik 2x op het menu klik dan schuift het menu niet meer terug in elkaar. Dat wil ik graag wel.

*problemen IE:
-Als ik klik dan schuift het menu wel uit, maar zodra ik met de muis over de onderliggende koppelingen heen ga verdwijnen ze meteen weer.

Ik wil het dus zo dat het een uitklapbaarmenu is waarbij 1x klikken het menu uitklapt en 2x klikken het menu weer inklapt, verder moet het gewoon functioneren als een menu.

Kan iemand mij helpen hiermee?
Alvast bedankt.

Onderstaand het script:

<script language="JavaScript" type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onclick=function() { 
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover"), "");
}
}
}

</script>


<style>

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 120px;
}

#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}

#nav li:active ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
} </style>

<ul id="nav">

<li><a href="#">Main item 1</a>

<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>

</li>

<li><a href="#">Main item 2</a>

<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>

</li>

<li><a href="#">Main item 3</a>

<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
</ul>

</li>

</ul> 

<script language="JavaScript" type="text/javascript">
sfHover();
</script>

 

[Poppoll]

Waarom het wiel opnieuw uitvinden als het al uitgevonden is?
Kijk op http://www.cssplay.co.uk/index.html
Menu's in overvloed!
PP

 

[wzshop]

Waarom het wiel opnieuw uitvinden als het al uitgevonden is?
Kijk op http://www.cssplay.co.uk/index.html
Menu's in overvloed!
PP

jeej ja ik zie het inderdaad. Weet jij ook toevallig zo'n menu te vinden wat ik zoek? met click? daaraast zoek ik er wel 1 waarbij de url's geindexeerd kunnen worden door google.

mvg.

 

[Poppoll]

Kijk hier dit is waarschijnlijk wat je zoekt: http://www.stunicholls.com/menu/simple.html
PP

 

[wzshop]

Kijk hier dit is waarschijnlijk wat je zoekt: http://www.stunicholls.com/menu/simple.html
PP

aah bedankt, zoiets bedoelde ik inderdaad

thanx!

 

[cuperus]

Dit is de oplossing

Voor de mensen die nog geen oplossing hebben

Vervang:

<script language="JavaScript" type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onclick=function() { 
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover"), "");
}
}
}
 
</script>

Door:

<script language="JavaScript" type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() { 
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover"), "");
}
}
}
 
</script>

Het werkt perfect!

 

[pascalboy]

sorry dat ik bij zo een oud ding post maar ik wil zeggen heel erg bedankt voor deze link: http://www.stunicholls.com/menu/simple.html
PP nu kan ik mijn eigen post sluiten

 

[crash]

Zal ik daarmee de topic maar sluiten. Graag oude topics met rust laten en eventueel alleen de info gebruiken.