Fancy dropdown menu

[Tommy Desperate]

I'm using FrontPage 2003 to maintain my website. I also have Jim Buyens
1200-page book "FrontPage 2003, Inside Out" to help me with problems. My
present problem is a little too complex for me though:

I' like to put a dropdown menu on my home page and on other pages, similar
to the one used in the navigation bar in the
http://www.hilliard.k12.oh.us/dvd site. When the mouse pointer is over a
navigation link, a dropdown menu appears with several other links. In this
way I could have clickable main topics and subtopics neatly organized without
clutter.

Is there a way I can do this with FrontPage? Where would I find step-by-step
instructions for doing it?

 

[MD Websunlimited]

Hi Tommy,

Take a look at MenuWeaver at http://www.websunlimited.com

 

[Murray]

If you know and can use CSS, the VERY best way to do menus like this is
explained here -

http://www.seoconsultants.com/css/menus/tutorial/

You create a nested list element. Each nested list becomes a drop-down in
the menu. Its visibility is controlled by the ingenious use of -

ul li:hover ul { display:block; }

which will only display the nested list element when that specific list
element's a tag is hovered - otherwise, it's hidden.

This tutorial offers a way to fix IE so that it will do the li:hover
thing....

 

[Paul M]

Here are some
http://simplythebest.net/scripts/DHTML_scripts/dhtml_menu_scripts.html
http://css.maxdesign.com.au/listamatic/index.htm

Paul M

 

[Mike]

This is the best I can do. It's similar to the menu on the website you gave.

<input style="position : absolute;left : 20;top : 20;border : 1px solid
black;background : gray" readonly
onmouseover="display.style.visibility = 'visible';display.style.left = 200"
value="Main Menu">
<div id="display"
style="position : absolute;left : 20;top : 20;visibility : hidden;border :
1px solid black;background : gray;width : 25%">
<a href="#">Link 1</a>
<p><a href="#">Link 2</a>
<input type="button" value="<<" onclick="display.style.visibility =
'hidden';display.style.left = '20'"
style="position : absolute;left : 168;top : 14">
</div>
<p align="center">Text placed here.</p>
<p align="center">The rollover doesn't affect or move this text.</p>