Nu hier mijn probleem: Ik heb op de website http://www.yourdigits.com/thole/ de lay-out aangepast en een clickshowhidemenu.css ingezet. Alles werkt gewoon goed maar nu zit ik al een aantal dagen vast met het feit dat de menu's steeds verkeerd openspringen. Wanneer men bv. op het eerste menutje klikt (kurkparket) en dan bv. op kurkparketongelakt. Wanneer je hierna naar een volgend menutje gaat (lakkenlijmen en polish) en je klikt hierop dan opend de goede site wel maar het menu verspringt van plaats en dan opend de reeks onder kurkparket weer.
Dit gebeurd bij alle menutjes.. je kunt het zien wanneer je even snel door alle menu's klinkt hij blijft maar verspringen. Ik hoop echt dat iemand mij hiermee kan helpen. Hieronder de CSS code.
CSS:
click-menu {
width: 197px;
}
.click-menu .box1 {
background-color: #004B97;
color: #000000;
font-weight: bold;
font-size: 12px;
font-family: tahoma;
padding: 4px 8px;
border-width: 9px;
border-color: #004B97;
border-style: solid solid solid solid;
cursor: default;
position: relative;
}
.click-menu .box1-hover {
background-color: #004B97;
color: #000000;
font-weight: bold;
font-size: 12px;
font-family: tahoma;
padding: 4px 8px;
border-width: 9px;
border-color: #004B97;
border-style: solid solid solid solid;
cursor: default;
position: relative;
}
.click-menu .box1-open {
background-color: #004B97;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
font-family: tahoma;
padding: 4px 8px;
border-width: 0px;
border-color: #004B97;
border-style: solid solid none solid;
cursor: default;
position: relative;
}
.click-menu .box1-open-hover {
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
font-family: tahoma;
padding: 4px 8px;
border-width: 9px;
border-color: #004B97;
border-style: solid solid none solid;
cursor: default;
position: relative;
}
.click-menu .box1 img, .click-menu .box1-hover img, .click-menu .box1-open img, .click-menu .box1-open-hover img, .click-menu .lnk1 img, .click-menu .lnk1-hover img {
position: absolute;
top: 6px;
right: 6px;
}
.click-menu .section {
background-color: #004B97;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
padding: 5px 5px 6px 5px;
border-width: 9px;
border-color: #004B97;
border-style: none solid solid solid;
display: none;
}
.click-menu .section a {
color: #FFFFFF;
text-decoration: none;
white-space: nowrap;
}
.click-menu .section a:hover {
color: #FFFFFF;
text-decoration: none;
white-space: nowrap;
}
.click-menu .box2 {
}
.click-menu .box2-hover {
background: #000000;
}
.click-menu .section .active,
.click-menu .section .active:hover {
color: yellow;
}
HTML
[code]
<html>
<head>
</head>
<body topmargin="0">
<link rel="stylesheet" type="text/css" href="ClickShowHideMenu_a.css">
<script type="text/javascript" src="ClickShowHideMenu_a.js"></script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
<body topmargin="0">
<table cellspacing="0" cellpadding="0" id="click-menu1" class="click-menu" width="111">
<tr>
<td>
<div><img border="0" src="images/Logo%20site-blauw.JPG" width="197" height="63"></a></div>
</td>
</tr>
<tr>
<td>
<div class="box1"><a href="watiskurk.htm"><font face="Tahoma" size="2" color="#FFFFFF">WAT IS KURK ?</font></a></div>
</td>
</tr>
<tr>
<td>
<div class="box1">KURKPARKET</div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurkvloeren/kurkparket_ongelakt.htm">Kurkparket ongelakt</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurkvloeren/kurkparket_gelakt.htm">Kurkparket gelakt</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurkvloeren/wicanders.htm">Kurklaminaat</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurkvloeren/toebehoren.htm">Toebehoren</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">LAKKEN LIJMEN POLISH</div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="onderhoudsmiddelen/lakken.htm">Lakken</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="onderhoudsmiddelen/lijm%20polish%20cleaners.htm">Lijm, polish, cleaner</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">WANDBEKLEDING</div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="wandbekleding/wandkurk.htm">Wandkurk</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">KURKEN </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurken/wijnkurken.htm">Wijnkurken</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurken/dopkurken.htm">Dopkurken</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurken/conische%20kurken.htm">Conische
kurken</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="kurken/bondels.htm">Bondels</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">HANDENARBEID </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="handenarbeid/assortiment.htm">Kurkassortiment</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="handenarbeid/kurkschijfjes.htm">Kurkschijfjes</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="handenarbeid/kurkballen.htm">Kurkballen</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="handenarbeid/Handenarbeidhoutjes.htm">Handenarbeidhoutjes</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">TECHNISCHE KURK </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="technischekurk/kurkrubber.htm">Kurkrubber</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">ONDERVLOEREN </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="ondervloeren/ondervloeren.htm">Ondervloeren</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">PERSKURK </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="perskurk/perskurkplaten.htm">Platen
en rollen</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="perskurk/strokenblokjes.htm">Stroken
en blokjes</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="perskurk/deklattenplinten.htm">Deklatten
en plinten</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">ISOLATIEKURK </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="isolatiekurk/isolatiekurk.htm">Isolatiekurk</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="box1">OVERIGE </div>
<div class="section">
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/kurkballen.htm">Kurkballen</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/kurkgranulaat.htm">Kurkgranulaat</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/kurkmeel.htm">Kurkmeel</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/kurkschors.htm">Kurkschors</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/laboratoriumringen.htm">Laboratoriumringen</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/orthopedische.htm">Orthopedische</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/schuurkurken.htm">Schuurkurken</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige/terrariumkurk.htm">Terrariumkurk</a></div>
<div class="box2"><img src="images/arrow2.gif" width="10" height="14" alt=""><a href="overige
[/code
