w3schools top drop down menu in DHTML

JavaScript
1

I tried to edit w3schools top drop down menu in DHTML tutorial example but I can’t seem to get it to work. I added another field in the menu but it doesn’t work. Can any1 help?

<html>
<head>
<style>
body{font-family:arial;}

table{font-size:80%;background:black}

a{color:black;text-decoration:none;font:bold}

a:hover{color:#606060}

td.menu{background:lightblue}

table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type=“text/javascript”>
function showmenu(elmnt)
{
document.all(elmnt).style.visibility=“visible”
}

function hidemenu(elmnt)
{
document.all(elmnt).style.visibility=“hidden”
}
</script>
</head>
<body>

<h3>Drop down menu</h3>

<table width=“100%”>
<tr bgcolor=“#FF8080”>
<td onmouseover=“showmenu(‘tutorials’)” onmouseout=“hidemenu(‘tutorials’)”>
<a href=“…/default.asp”>Tutorials</a><br />
<table class=“menu” id=“tutorials” width=“100%”>
<tr><td class=“menu”><a href=“…/html”>HTML</a></td></tr>
<tr><td class=“menu”><a href=“…/xhtml”>XHTML</a></td></tr>
<tr><td class=“menu”><a href=“…/css”>CSS</a></td></tr>
<tr><td class=“menu”><a href=“…/xml”>XML</a></td></tr>
<tr><td class=“menu”><a href=“…/xsl”>XSL</a></td></tr>
</table>
</td>
<td onmouseover=“showmenu(‘scripting’)” onmouseout=“hidemenu(‘scripting’)”>
<a href=“…/default.asp”>Scripting</a><br />
<table class=“menu” id=“scripting” width=“100%”>
<tr><td class=“menu”><a href=“…/js/default.asp”>JavaScript</a></td></tr>
<tr><td class=“menu”><a href=“…/vbscript/default.asp”>VBScript</a></td></tr>
<tr><td class=“menu”><a href=“default.asp”>DHTML</a></td></tr>
<tr><td class=“menu”><a href=“…/asp/default.asp”>ASP</a></td></tr>
<tr><td class=“menu”><a href=“…/ado/default.asp”>ADO</a></td></tr>
</table>
</td>
<td onmouseover=“showmenu(‘home’)” onmouseout=“hidemenu(‘home’)”>
<a href=“…/default.asp”>Home</a><br />
<table class=“menu” id=“scripting” width=“100%”>
<tr><td class=“menu”><a href=“…/js/default.asp”>JavaScript</a></td></tr>
<tr><td class=“menu”><a href=“…/vbscript/default.asp”>VBScript</a></td></tr>
<tr><td class=“menu”><a href=“default.asp”>DHTML</a></td></tr>
<tr><td class=“menu”><a href=“…/asp/default.asp”>ASP</a></td></tr>
<tr><td class=“menu”><a href=“…/ado/default.asp”>ADO</a></td></tr>
</table>
</td>
<td onmouseover=“showmenu(‘validation’)” onmouseout=“hidemenu(‘validation’)”>
<a href=“…/site/site_validate.asp”>Validation</a><br />
<table class=“menu” id=“validation” width=“100%”>
<tr><td class=“menu”><a href=“…/site/site_validate.asp”>Validate HTML</a></td></tr>
<tr><td class=“menu”><a href=“…/site/site_validate.asp”>Validate XHTML</a></td></tr>
<tr><td class=“menu”><a href=“…/site/site_validate.asp”>Validate CSS</a></td></tr>
<tr><td class=“menu”><a href=“…/site/site_validate.asp”>Validate XML</a></td></tr>
<tr><td class=“menu”><a href=“…/site/site_validate.asp”>Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>

<p>Mouse over these options to see the drop down menus</p>

</body>
</html>

—Thanks

2

Which field is the one you added?

BTW; document.all will only work in IE

3

Change the id of the 3rd menu from “scripting” to “home” Because you have the same ID for the second and third columns, they produce an error.

Currently you have the second colums as:


<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="../default.asp">Scripting</a><br />
<table class="menu" [color=red]id="scripting"[/color] width="100%">

and the third as:


<td onmouseover="showmenu('home')" onmouseout="hidemenu('home')">
<a href="../default.asp">Home</a><br />
<table class="menu" [color=red]id="scripting"[/color] width="100%">

Change this third one to be:


<td onmouseover="showmenu('home')" onmouseout="hidemenu('home')">
<a href="../default.asp">Home</a><br />
<table class="menu" [color=blue]id="home"[/color] width="100%">
4

I did what you said before but I must have missed changing one field that why I could never get it to work.

It works now. Thanks for taking the time to solve my problem.

5

No problem. Glad it worked :slight_smile: