Anylinkcssmenu sub-menu causes main menu to disappear

1) Script Title: anylinkcssmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm
3) Describe problem: I am trying to create a sub-menu that opens to the right of the main dropdown menu, like Demo #3. On my menu under the Loans heading, the pop-down menu works great, then I have one item on that menu, convenience, that I need the sub-menu to pop-up. It does that just fine but when I move my mouse onto that menu, the 1st drop-down menu disappears. The Demo #3 on the script page does not do that. Also the examples shown in Step 3 do not appear to include that Demo #3 example. You can find an example of my menu here:

http://65.99.213.12/~crosroad/menutest.php

What is causing the 1st drop-down menu to disappear? how can I fix it?

Any assistance on this is appreciated. I've spent hours looking at this trying to figure out why the 1st menu is disappearing after hovering over the sub-menu. Anyone out there have an idea what is causing this?

Anylink Menu currently doesn't easily support more than 1 level deep of sub menus unfortunately. There are a few other scripts that do, however. Take a look at one of the below:

http://www.dynamicdrive.com/dynamici...exdropdown.htm
http://www.dynamicdrive.com/dynamici...ddmegamenu.htm

script: http://www.dynamicdrive.com/dynamici...exdropdown.htm

I've now tried the flexmenu and it works however there are a few issues that I can't simply figure out why they're happening. I'm using my menu items and trying to attach the menu to a graphic. I downloaded and am using the flexdropdown.js and flexdropdown.css as they exist on the website.

1. There is a white space on the right side of the menu in the column space where the arrow is located. Why? This is not how it appears on the example.

2. When I hover ove the submenu (Convenience Services) it expands the row and adds a line of whitespace below the menu item. Why? And the sub-menu's behave as #1 above.

3. The feature to highlight the selected parent LI of the UL as shown in the example at the bottom of the page is not working as shown. Why? I've changed the settings in the CSS file as instructed to change the color but it doesn't seem to do anything.

I've tried changing this width settings in the CSS to be the same and that seemed to correct #1 but if that's the exact css file that the examples are using its not acting the same.

Lastly: As with the AnyLinkCssMenu product, is there anyway to add the ability to add the "data-image" and "data-overimage"attributes to change the menu images? This feature would make this script very perfect.

Any help on this is Greatly appreciated.

The test menu is now located at:

http://207.7.80.133/~crosroad/menutest.php

if my link looks like:

Code:

<a href="#" data-flexmenu="loansmenu"><img src="images/menu-loans1.gif" name="loans" width="105" height="25" border="0"></a>

and you could change the style of the parent link by adding this to the css:

Code:

a[data-flexmenu="loansmenu"].selected{ background: yellow; }

can the css file be used to replace the parent img src with another image? If yes how?

There is an error in your UL markup for the menu- sub ULs need to be contained within their LI parent, which you currently don't have:

Code:

<li><a href="?FID=ln-convenience.html">Convenience Services</a></li> <ul> <li><a href="?FID=ln-preapprove.html">PreApprovals</a></li> <li><a href="?FID=ln-lifedis.html">Life & Disability Ins.</a></li> <li><a href="?FID=ln-gap.html">Gap Insurance</a></li> <li><a href="?FID=ln-route66.html">Route 66 Ext. Warranty</a></li> <li><a href="?FID=ln-payments.html">Payments</a></li> <li><a href="?FID=ln-carfax.html">Carfax</a></li> <li><a href="?FID=ln-invest.html">Invest In America</a></li> <li><a href="?FID=ln-credrep.html">Free Credit Report**</a></li> </ul> <li><a href="?FID=rt-allloans.php">Loan Rates</a></li>

The above should be:

Code:

<li><a href="?FID=ln-convenience.html">Convenience Services</a> <ul> <li><a href="?FID=ln-preapprove.html">PreApprovals</a></li> <li><a href="?FID=ln-lifedis.html">Life & Disability Ins.</a></li> <li><a href="?FID=ln-gap.html">Gap Insurance</a></li> <li><a href="?FID=ln-route66.html">Route 66 Ext. Warranty</a></li> <li><a href="?FID=ln-payments.html">Payments</a></li> <li><a href="?FID=ln-carfax.html">Carfax</a></li> <li><a href="?FID=ln-invest.html">Invest In America</a></li> <li><a href="?FID=ln-credrep.html">Free Credit Report**</a></li> </ul> </li> <li><a href="?FID=rt-allloans.php">Loan Rates</a></li>

Please fix the above issue first, then we can tackle the others. :)

http://www.dynamicdrive.com/dynamici...exdropdown.htm

My test menu is now located at: http://207.7.80.133/~crosroad/menutest.php

Thanks for your help. I appreciate it. I did it. My menu list for the loans menu now looks like:

Code:

<ul id="loansmenu" class="flexdropdownmenu"> <li><a href="?FID=ln-autos.html">Autos</a></li> <li><a href="?FID=ln-motorcycles.html">Motorcycles & ATVs</a></li> <li><a href="?FID=ln-campers.html">Campers/RVs</a></li> <li><a href="?FID=ln-boats.html">Boats</a></li> <li><a href="?FID=ln-shares.html">Shares Secured</a></li> <li><a href="?FID=ln-personal.html">Personal</a></li> <li><a href="?FID=ln-heloc.html">Home Equity (HELOC)</a></li> <li><a href="?FID=ln-mortgages.html">Mortgage</a></li> <li><a href="?FID=ln-visa.html">VISA Cards</a></li> <li><a href="?FID=ln-draftline.html">Draftline (OD Protection)</a></li> <li><a href="?FID=ln-convenience.html">Convenience Services</a> <ul> <li><a href="?FID=ln-preapprove.html">PreApprovals</a></li> <li><a href="?FID=ln-lifedis.html">Life & Disability Ins.</a></li> <li><a href="?FID=ln-gap.html">Gap Insurance</a></li> <li><a href="?FID=ln-route66.html">Route 66 Ext. Warranty</a></li> <li><a href="?FID=ln-payments.html">Payments</a></li> <li><a href="?FID=ln-carfax.html">Carfax</a></li> <li><a href="?FID=ln-invest.html">Invest In America</a></li> <li><a href="?FID=ln-credrep.html">Free Credit Report**</a></li> </ul> </li> <li><a href="?FID=rt-allloans.php">Loan Rates</a></li> <li><a href="?FID=calcl.html">Loan Calculator</a></li> <li><a href="?FID=ln-apply.html" target="_blank">Apply Online</a></li> </ul>

It still doesn't appear to change the parent style on Convenience Services when it's selected.

I was working on the live site for this customer and thought either way for these two types of menus. If the Flex menu could do image link rollovers and/or the anycss menu could do sub-menus would be great. I found a way do the rollover by hacking the javascript code that is created by Dreamweaver for rollovers and the flexmenu javascript but I think it's not the best way. It seems like that the rollover could be done using the CSS just like you can do with the a.selected (if we can get that working) but I'm just not smart enough with CSS to know what objects to specify.

Again - THANKS for your help on this!

Sorry for the delay in response. Since your parent menu items are images, that's the reason they don't change states while the mouse is over one of its sub menus. The script by default is only able to make whatever changes CSS is able to during the state change, by applying a CSS class of "selectedanchor" to the parent menu item while the mouse is over its sub menus.

Not all is lost, however, Looking at your present parent menu's look, it's very easy to convert it to a pure CSS based interface without changing the way it looks. Do you need help with that?

[QUOTE=icoso;277002]script: http://www.dynamicdrive.com/dynamici...exdropdown.htm

When I hover ove the submenu it expands the row and adds a line of whitespace below the menu item. [QUOTE]

Hi,
I have the same problem, how did you solve it?