Drop Down Menu help needed.

[mark200]

Hey,
I am designing a website for my school as part of my "mini-company". I had a really good drop down navagation bar, except I realised two days ago that it wasn't compatible with firefox. So I decided I had to find a new one. I got this from dynamic drive, but I'm having a small problem with it.

When you click on one of the links that also has a drop down menu, the page doesnt go to that link, just the menu drops down.

This is the site i'm doing. The new navagation bar is on the first page only. For example, when you click on "about the school", the link doesnt work. I'm new to webdesign so I don't know a lot.

Please help me,
Mark

[jscheuer1]

That is the intended function for the menu. The idea is that for javascript enabled browsers, the drop downs will contain all the links required for the header link topic and that in non-javascript browsers (where there can be no drop downs for this menu) the header link will take the user to alternative equivalent content.

It doesn't have to be this way. Here is your "About the School" link:

<a href="history.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;About the School&nbsp;</a>

Removing the red part will make it an active link in javascript enabled browsers as well as in non-javascript enabled ones.

[mark200]

That's working. Thanks very much for your help.
Mark

[mark200]

Sorry, one more question if you don't mind. How do you get rid of the space above and below the text on the man links, so that the the "|" reaches right up to the white line above it. I know it's a stupid question, but I've been looking at the script for ages.

[jscheuer1]

That would be a bit hard to do as | is a character and as such is subject to the padding and margin values for its container, just like the other characters (the letters) in the links. If you were to remove the | character and put the links in a table with white border, that might get what you are looking for but, it will probably get tricky - you might need borders only on certain parts of each cell, the container (in this case the td of the table that presently holds the links) may need zero padding and margins. What you have now looks good, I'd stick with it.

You could get close to having no space, using these styles:

td {
padding:0;
}
table {
border-spacing:0;
}

[mark200]

Ok thanks. I put that code in like this:

#dropmenudiv {
color: white;
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font-family:verdana;
font-size:8pt;
font-weight:bold;
line-height:14px;
z-index:100;
}

td {
padding:0;
}
table {
border-spacing:0;
}

#dropmenudiv a{
color: white;
width: 100%;
display: block;
text-indent: 3px;
font-family:verdana;
font-size:8pt;
font-weight:bold;
text-decoration: none;
font-weight: bold;
}

is that where it's supposed to go?

Well it didn't make any difference if it is. I think there may be something else, as if you look at the bottom of the row, there is just a small space between | and the white line, but there is a much larger space at the top. Is there any reason why?

Mark

[jscheuer1]

Sorry, I only checked in FF. In IE it is different. This is a more complex solution but works with your markup in IE, FF and Opera -

Add an id to the the menu table (and get rid of the height="0", that's meaningless):

<table id="anyl" style="background-color:#01009a;" width="780">
<tr>
<td>&nbsp;&nbsp;<a href="index.html" class="menutext">Home&nbsp;</a>&nbsp;<b><font size="3" color="white">|</font></b>&nb

Add these styles, instead of the ones I mentioned before:

#anyl font {
line-height:80%;
}
#anyl td {
padding:0;
padding-top:1px;
}
#anyl.table {
border-collapse:collapse;
}
* html #anyl td {
padding-top:0;
padding-bottom:1px;
}

[mark200]

That's working great. Thanks so much for your help. I realise this is no longer about the script specifically but I have one final question and I'll be out of your way forever (hopefully). Well you see the thickness of the | character here. Well, how can I get it as thick as here. When I make it size 3 font, its the right thickness but unfortunately too long, that's the right size, but not that right thickness. Thanks for your help so far,
Mark.