Implementing Drop Down Menu

[mensendamp]

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: I have a new website and would like to implement the drop down menu script into the existing navigation I have. They are images, how do I implement this script without changing the look of my nav?

Below is the code on the site I am using for my section.

Any advice would be greatly appreciated! :)

Can you please tell me the best way implement these into the menu I have:

<div id="menu">
<ul>
<li><a href="subpage1.html" id="menu1" accesskey="1" title=""><span>About Us</span></a></li>
<li><a href="#" id="menu2" accesskey="2" title=""><span>Services</span></a></li>
<li><a href="subpage2.html" id="menu3" accesskey="3" title=""><span>Portfolio</span></a></li>
<li><a href="#" id="menu4" accesskey="4" title=""><span>Contact</span></a></li>
</ul>
</div>

[tonyking]

I'm not 100% on this, but I don't see any reason this wouldnt work for you.

Here's what I think you should do:
Obviously follow the instructions given with this script. Copy paste .css and java script into the head of your document. Then make the following changes on your navigation bar:


<div id="menu">
<ul>
<li><a href="subpage1.html" id="menu1" accesskey="1" title="" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><span>About Us</span></a></li>
<li><a href="#" id="menu2" accesskey="2" title="" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><span>Services</span></a></li>
<li><a href="subpage2.html" id="menu3" accesskey="3" title="" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><span>Portfolio</span></a></li>
<li><a href="#" id="menu4" accesskey="4" title="" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><span>Contact</span></a></li>
</ul>
</div>


You're just essentially adding the attributes to your existing links (Orange), configure the menu however you want in the head of the document, and just make sure the menu1..2...3...4 references correspond to what you want (Red).

If that doesn't work for you I'd be really suprised.

-Tony King