I've struggled with it for 10+ hrs ...
Code: Select all
<ul>
<li><a onmouseover="switchit('submenu1')">Menu 1</a>
<ol id="submenu1" style="display: none">
<li><a onmouseover="switchit('submenu11')">Sub Menu 1.1</a>
<ul id="submenu11" style="display: none">
<li>Abcd</li>
<li>Abcde</li>
</ul>
</li>
<li><a onmouseover="switchit('submenu12')">Sub Menu 1.2</a>
<ul id="submenu12" style="display: none">
<li>Bcde</li>
<li>Bcdef</li>
</ul>
</li>
</ul>
</li>
<li><a onmouseover="switchit('submenu2')">Menu 2</a>
<ol id="submenu2" style="display: none">
<li><a onmouseover="switchit('submenu21')">Sub Menu 2.1</a>
<ul id="submenu21" style="display: none">
<li>Cdef</li>
<li>Cdefg</li>
</ul>
</li>
<li><a onmouseover="switchit('submenu22')">Sub Menu 2.2</a>
<ul id="submenu22" style="display: none">
<li>Defg</li>
<li>Defgh</li>
</ul>
</li>
</ul>
</li>
</ul>
Code: Select all
function switchit(b){
var a = document.getElementById(b);
if(a.style.display=="none")
{
a.style.display = "block";
}
if(a.style.display == "block")
{
a.style.display = "none";
}
}
But the weird thing is.. it's doing nothing !
Also menu2's position is offset ...
What am i overlooking?