CSS menu problem

Edited code available on request

[Matt_G]

I'm trying to set up a multiple level CSS menu. The structure's solid but whenever I hover over one of the main menu image buttons to activate the relevant submenu, the button goes completely blank rather than shifting to the "mouseeover" image.

Any ideas what could be wrong?

[simonuk]

Without seeing any of the code or markup pretty much impossible to say.

Make sure the hover of the initial level 1 <li> isn't pulling in information from other level 1 <li>'s that may have the same effect. FireBug will probably find the problem in a few seconds.

[Matt_G]

Edited code segment here

<li><a class="qmparent" href="javascript:void(0)"><img class="qm-is qm-ia" src="Products.png" width="107" height="45" onmouseover = this.src="ProductsMouseOver.png" width="107" height="45"></a>
<ul>
<li><span class="qmtitle" >Main Products</span></li>
<li><a href="javascript:void(0)">60m</a></li>
<li><a href="javascript:void(0)">150m</a></li>
<li><a href="javascript:void(0)">600m</a></li>
<li><a href="javascript:void(0)">Technical specifications</a></li>
<li><a href="javascript:void(0)">Backpack with semi</a></li>
<li><a href="javascript:void(0)">Backpack with closed</a></li>
<li><a href="javascript:void(0);">Mouthpiece</a></li>
<li><a href="javascript:void(0);">Regulator</a></li>
<li><a href="javascript:void(0);">Monitoring</a></li>
<li><a href="javascript:void(0);">Buying a system</a></li>
</ul></li>

[simonuk]

It's JavaScript that's doing the work which includes the mouseover, not CSS. Maybe try the JavaScript forum for help.

[rocknbil]

Welcome aboard Matt_G!

First, you might consider using CSS instead of all the JS, for the mouse-overs, and limit the JS to any onClick actions you require. The following is just based on observation of what you've posted.

<a class="qmparent" href="javascript:void(0)"><img class="qm-is qm-ia" src="Products.png" width="107" height="45" onmouseover = this.src="ProductsMouseOver.png" width="107" height="45"></a>

To start, the image won't inherently react to mouseover (reliably.) You want to mouseover the anchor:

<a class="qmparent" href="javascript:void(0)" onmouseover="document.getElementById('unique-id-here').src='ProductsMouseOver.png'"><img class="qm-is qm-ia" id="unique-id-here" src="Products.png" width="107" height="45" width="107" height="45"></a>

(Changes noted below for quoting)

Second, never do this:

href="javascript:void(0)"

Because if JS is disabled, the links won't work. What you want there is on click, return false, which tells the browser to allow JS to manage the navigation and not navigate to whatever is in the href. So if JS is disabled, the link will still work.

<a class="qmparent" href="file.html" onmouseover="document.getElementById('unique-id-here').src='ProductsMouseOver.png'" onClick="some_js_function('file.html'); return false;"><img class="qm-is qm-ia" id="unique-id-here" src="Products.png" width="107" height="45" width="107" height="45"></a>

third, no spaces in attributes (minor point, but will kick validation errors;) also in your original you have an incorrect quoting, the " should immediately follow the =:

onmouseover = this.src="ProductsMouseOver.png"

S/B

onmouseover="this.src='ProductsMouseOver.png'"

incorrect per point 1

Last, once you sort all this out, search this forum for ways to attach behaviors to elements so all this JS is extracted to external files or in the document head.

[Matt_G]

Tried that - still getting the same result. Code currently looks like this:

<li><a class="qmparent" href="file.html" onmouseover="document.getElementById('Products-hover').src='ProductsMouseOver.png'" onClick="some_js_function('home.html'); return false;"><img class="qm-is qm-ia" id="Products-regular" src="Products.png" width="107" height="45" width="107" height="45"></a>