help: JavaScript hide list

[lucky777]

hi guys,

i want to create a link where a user can change the category that he is browsing.

when the user clicks on the link, a list of categories appear in the dropdown, but when the mouse is not over the list, the list disappears and the user only sees the link. The list contains hyperlinks to new category pages.

I know this is very basic for u geeks, but u see im very new to javascript.

I create a div for the list and hid it and created an onclick event for the link, but when the list of categories appear, the page moves down. i dont want that to happen.

Please help.

Thanks in advance.

[jscheuer1]

Sounds like you need to reserve layout space for the list or lists (if there are more than one). A container div with a set height around the list(s) could do that. There are other ways.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[lucky777]

thanks for your reply mate!

the list is a list of hyperlinks.

the list appears like a dropdown where the hyperlinks appear.

cant this be achieved without taking any space on the main page? i mean the list should appear as a layer on the page.

i apologize if im not explaining properly, but im new and dunno th terms


Since im trying it on localhost, i have uploaded an image of the desired output.

thanks a lot

[jscheuer1]

So this isn't a select element then, as that would be the default behavior of a select element. If you could make it a select element, that could work out.

Another option is to make a container div position relative and place the list position absolute inside the container, something like:

<div style="position: relative;">
<div id="list" style="position: absolute; top:0, left:0; width: 100px; height: 500px; display: none;">
list links go here
</div>
</div>

Then when you want the list, make it display: block; via javascript.