Having problems with a drop down menu

eminee · #1 (**permalink**) Jan 8th, 2008, 14:35

Hi.. new here and I'm wondering if anyone can help me.....I'm building a website in my web design class at college and have come accross a problem with a javascript code I tried to create for my menu.

This is the script in my header:

HTML: Select all

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>

and this is the script in my HTML:

HTML: Select all

<div id="servingyou" onmouseover="showmenu('servingdrop')" onmouseout="hidemenu('servingdrop')"><a href="web.html" valign="center">Serving You</a></div>
<table class="servingtable" id="servingdrop" width="100" cellspacing="0"
onmouseover="showmenu('servingdrop')" onmouseout="hidemenu('servingdrop')">
   <tr><td class="cell"><a href="council.html">The Council</a></td></tr>
   <tr><td class="cell"><a href="minutes.html">Minutes</a></td></tr>
<tr><td class="cell"><a href="reports.html">Annual Reports</a></td></tr>
</table>

I also have this in my CSS defining the table:

HTML: Select all

table.servingtable
{
position:absolute;
top:55px;
left:282px;
visibility:hidden;
z-index:1;
}

When opened in IE6 it shows an error. And the drop down menu also appears when the mouse isn't even hovering over the button.. but only on certain areas of the page.
Can anyone help me?

karinne · #2 (**permalink**) Jan 8th, 2008, 14:57

Does the JS need to be done by you? Is this for a JS class?

If not, have a look at Sons of Suckerfish for the code

eminee · #3 (**permalink**) Jan 8th, 2008, 15:04

Well, our lecturer seems quite open about us 'borrowing' code like JS... but one of the deliverables for the project is the code of our site with comments in it. I can't really add comments if I don't understand the code >.<

Rakuli · #4 (**permalink**) Jan 8th, 2008, 16:15

There's nothing wrong with that code

It works fine for me in FF and IE...

Can you post your complete page? Perhaps there is an error in its setup.

eminee · #5 (**permalink**) Jan 8th, 2008, 17:08

Gah... I tried incorporating the code from suckerfish in my page but it didn't work....now I can't get my original code to work how it was before. Heres my whole page...theres no content in it yet.. just trying to get the template right and not getting very far

Code: Select all

<html>
<head>
<link rel="stylesheet" type="text/css"
href="hempnallcss.css" />

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
 

</script>

</head>
<body>
<div class="page">
<div class="title">
<div class="banner">
</div>
<div class="menubase">
<div id="home">
<a href="web.html" valign="center">Home</a></div>
 
 
 
 
<div id="events" valign="center"><a href="web.html" valign="center" onmouseover="showmenu('eventdrop')" onmouseout="hidemenu('eventdrop')">Events</a></div>
<table class="eventstable" id="eventdrop" width="100" cellspacing="0"  onmouseover="showmenu('eventdrop')" onmouseout="hidemenu('eventdrop')">
   <tr><td class="cell"><a href="news.html">News</a></td></tr>
   <tr><td class="cell"><a href="meetings.html">Meetings</a></td></tr>
</table>
 
<div id="servingyou" onmouseover="showmenu('servingdrop')" onmouseout="hidemenu('servingdrop')"><a href="web.html" valign="center">Serving You</a></div>
<table class="servingtable" id="servingdrop" width="100" cellspacing="0"
onmouseover="showmenu('servingdrop')" onmouseout="hidemenu('servingdrop')">
   <tr><td class="cell"><a href="council.html">The Council</a></td></tr>
   <tr><td class="cell"><a href="minutes.html">Minutes</a></td></tr>
<tr><td class="cell"><a href="reports.html">Annual Reports</a></td></tr>
</table>

<div id="information" onmouseover="showmenu('informationdrop')" onmouseout="hidemenu('informationdrop')">
<a href="web.html" valign="center">Information</a>
</div><table class="informationtable" id="informationdrop" width="135" cellspacing="0"
onmouseover="showmenu('informationdrop')" onmouseout="hidemenu('informationdrop')">
   <tr><td class="cell"><a href="recycling.html">Recycling</a></td></tr>
   <tr><td class="cell"><a href="pets.html">Pets</a></td></tr>
<tr><td class="cell"><a href="statistics.html">Statistics</a></td></tr>
<tr><td class="cell"><a href="pets.html">Pets</a></td></tr>
<tr><td class="cell"><a href="charities.html">Charities</a></td></tr>
<tr><td class="cell"><a href="businesslinks.html">Businesses & Links</a></td></tr>
</table>
 
<div id="location"><a href="web.html" valign="center">Location</a></div>
<div id="linkcontacts"><a href="menu.html" valign="center">Links & Contacts</a></div>
</div>

</div>
<div class="content">
</div>
<div class="bottom">
</div>
</div>

</div>

</body>
</html>

Will you need the CSS?
Thanks for your help

Rakuli · #6 (**permalink**) Jan 8th, 2008, 17:15

This all works for me... It is doing as you intend it to.

What is the error that you are getting in IE and do you get any errors in Firefox?

eminee · #7 (**permalink**) Jan 8th, 2008, 17:19

I haven't tried Firefox yet, since I'm not on my own computer but IE gets an error and now the tables don't show up at all.
Could it be the css or images messing it up? I have had a little difficulty with the positioning of my layout....maybe that is the cause?

Rakuli · #8 (**permalink**) Jan 8th, 2008, 17:29

You have a whole extra </div> closing tag.

Remove the last one as it may be causing errors when IE is trying to access the DOM with javascript.

Your CSS shouldn't be causing any errors with the javascript unless it is completely wrong.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Positioning problems with horizontal drop down menu	dreamabstract	Web Page Design	2	Jun 16th, 2008 12:09
Drop down menu alignment problems. Div wont vertically align.	Itsumishi	Web Page Design	7	Mar 4th, 2008 04:57
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Drop down menu problems	matelo	JavaScript Forum	0	Jan 16th, 2006 16:48
help with drop menu	makemesick	JavaScript Forum	8	Apr 25th, 2005 21:19

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Having problems with a drop down menu