Help me with drop down nav please.

[Radecut]

I recently made a drop down nav with nested lists and jQuery. But what I want the dropdown to do is to cover whatever other element is under it. Instead they jumble together which looks really messy. Is there is a easy way to fix this? Thanks.

[ralph.m]

Hi Radecut. Welcome to the forums.

Yes, there's always a way to fix something like this. Can you post a link so we can see what's going on?

[Radecut]

Thanks for the welcome! Heres a link to my problem:
www.polymedsci.com/example.html

[ralph.m]

Hm, that dropdown is incomplete, as you can't hover over the sub links, so my advice would be to dump that version. It seems there's some transparency on the background of the sub list, but I can't for the life of me see where it's set. Weird. Anyhow, I'd suggest trying a better dropdown. Here's a simple one:

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

If you want something fancier but more reliable, try this:

http://users.tpg.com.au/j_birch/plugins/superfish/

[Radecut]

Thank you very much for the links! I have decided to try the second one. I made a working suckerfish dropdown menu, but I need some help with incorporating superfish with it. I linked the Javascript, but I do not understand what to add to the CSS. Could you tell me?

[ralph.m]

I do not understand what to add to the CSS. Could you tell me?

Can you post a link to what you have so far? Otherwise, all we can do is suggest you look at how the Suckerfish menu works on their site. If you look at the source code and explore the CSS, you'll see how it works.

[Radecut]

Oh wow again, the new menu still has the problem of hiding behind other elements, here's the link, is there an easy way to fix this?
http://www.polymedsci.com/example.html

[ralph.m]

Aye, 'tis very easy. Just add sommat like this:

#navigation {
position: relative;
top: 5px;
text-align: left;
display: block;
padding: 0;
margin: 0;
z-index: 100;
}

[Radecut]

Thank you so much! I really appreciate it. I never though it would be that easy. Thanks! Just for future reference, what does z-index do?

[ralph.m]

Just for future reference, what does z-index do?

Elements on a page basically layer on top of each other if there is any overlap, the elements later on the page having a higher stacking order. Your dropdown was "above" the following content in the code, so appeared behind it.

You can change the stacking order with the use of z-index. However, to change the z-index of an element, it must have a position: setting (like position: relative etc.) The z-index: 100 was just a random number. The main content probably has a z-index of 1 or something like that—I can't remember. You could experiment with how low the z-index can go before it falls behind again, but usually one just sets a high z-index and that's it. You could set it to a million, if you wanted.

[BillO]

Where's your DTD?

This seems akward: PMS can ensure the customers to get high quality products and first-rate support in the following areas:

Don't you want to say, "ensure that customers get high quality products..." Perhaps say "our clients recieve" instead of "customers get." Just a suggestion.

[Paul O'B]

HI,

You are linking to the same stylesheet 3 times?

<link href="style1.css" rel="stylesheet" type="text/css">
<div class="shared">
					<div id="newsarea">

Remove the link element from your library items as they cannot go in the body of the html anyway as it is invalid and pointless to make browsers download the same file 3 times.

The big images on the right should be inside a floated column (float:right) and not moved with relative position as currently they are sitting on top of your text content. You will very rarely move elements using relative position as it does not actually move anything physically but only visually; the space the relative element leaves behind is always preserved as though the element had never moved.,