Image Shows Wrongly in All Levels Navigational Menu

[mindretreat]

1) Script Title: All Levels Navigational Menu (v2.1)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu/index.htm
3) Describe problem:

I need to show images of my product after each menu choice.

The path where the image should appear is Our Brands --> Living Earth Crafts --> Cuvee Pro Salon --> Cuvee Classic

I can get it correctly in windows. However in FireFox and Safari. the image shows incorrectly when the mouse reaches "Cuvee Pro Salon" level

The url is www dot medispaboutique dot com.


I appreciate assistance regarding this problem.

Thank You very much in advance.

[ddadmin]

So to clarify, are you saying the image appears correctly in Windows for all browsers? In other words, the issue with Firefox and Safari is on a Mac? In Win XP FF3.x, I see an image appearing at the very end.

[mindretreat]

The code functions correctly only in Windows. The image should appear only when mouse is over the third choice "Cuvee Classic"

However In Firefox and Safari, both the right arrow and image appear wrongly when mouse is on the first choice "Cuvee Pro Salon", or any choice on that level of menu. It should appear only on the third choice "Cuvee Classic".

The below code is the only code I added.
<ul><img src="oakworks_celesta_maxx.jpg" border="0"> </ul>

It may be the code I am using. Is there an alternative simpler code that functions correctly in all browsers Win/Firefox/Safari?

Thank You.

[mindretreat]

Sorry I missed your previous question. I only test on Windows-based systems, not Mac.

The code seems to work on IE, but not Firefox and Safari. Although you can see a picture using Firefox, the picture appears whenever mouse is on that level of menu is reached, no matter whether cursor is over the third choice "Cuvee Classic".

However, the picture should appear only on the third choice "Cuvee Classic" as I added the code for the picture only on the third choice.

Thank You.

[mindretreat]

Hi,

I have uploaded a more clearer example with 3 pictures for 3 different choices. The url is www dot medispaboutique dot com.


If you follow the below path using IE, you can see 3 pictures corresponding to three diferent choices

The path where the image should appear is Our Brands --> Living Earth Crafts --> Cuvee Pro Salon --> Cuvee Pro Salon/Contemporary/Classic

However for Firefox and Safari, you only see 1 picture and it does not change at all.

Also, is it possible to make the images clickable to go the url of the specific page?

Please kindly assist.

Thank You.

[ddadmin]

Instead of making the changes you currently have to the HTML for the drop down menus, it's best to just use the default, and substitute a particular menu item's text with the IMG tag instead. For example:

  <ul>
  <li><a href="#">Sub Item 5.1b</a></li>
  <li><a href="#">Item Folder 5.2b</a>
    <ul>
    <li><a href="#"><img src="test.gif" style="border:0" /></a></li>
    <li><a href="#">Sub Item 5.2.2b</a></li>
    <li><a href="#"><img src="test.gif" style="border:0" /></a></li>
    </ul>
  </li>

You may have to tweak the CSS applied to the drop down menu UL a bit to get it to look exactly the way you want, but this is far better than making structural changes to the menu as you currently have, which produces something the script may not be able to handle predictably.

[mindretreat]

Thank you for your suggestion. I have tried this approach very early as it is easy to implement.

I have uploaded your suggested code and an image of a logo.

The path where the logo image should appear is Our Brands --> Living Earth Crafts --> Cuvee Pro Salon --> Cuvee Traditional


Please kindly take a look with Firefox or Safari browser compared to IE. You will find that it does not work with Firefox or Safari, but seem to work with IE.

Please further assist.

[ddadmin]

Looking at your page's source, there are HTML errors with your nested list. For example, in the below:

                        <li><a href="#">Cuvee Pro Salon</a></li>
						
						<ul>
								<img src="europeantouch_rinato.jpg" border="0">
						</ul>

The parent LI element should wrap around the child UL, ie:

                        <li><a href="#">Cuvee Pro Salon</a>
						
						<ul>
								<a><img src="europeantouch_rinato.jpg" border="0"></a>
						</ul>
                      </li>

Notice the IMG element is also surrounded by a A element, which isn't necessary by default, but based on the default CSS used to style the menu, is. Make sure your HTML list are properly nested throughout.

[mindretreat]

Thanks DD Admin!

Your code now worked now in all IE, Firefox and also Safari browsers. I have uploaded the latest version. The url is www dot medispaboutique dot com.

There are some other problems which I need your kind assistance:
a) Is there a way to display the model pictures without the border of the drop-down menus. I tried twesking the CSS and found it affects globally all drop-down menus. Can the CSS affect only the menu at the level of the model pictures.
b) Unique In IE, the drop-down menu has a white bottom border despite the border bottom being set to "none". Firefox and Safari browsers seemd ok.
c) In Firefox and Safari browsers, the right side of the top menu has a white space due to number of buttons. My table row is set at 930px, but the menu occupies perhaps only 920. How do I fill in this space so the top menu appears to cover the entire length?

Looking forward to your help again.

Thank You in advance.

[ddadmin]

What you can do is apply a CSS class to the UL that directly contains the images to try and style it and its menu items as desired. For example, in the below chunk of code, you'd add the code in red:

  <ul>
  <li><a href="#">Sub Item 5.1b</a></li>
  <li><a href="#">Item Folder 5.2b</a>
    <ul class="customstyle">
    <li><a href="#"><img src="test.gif" style="border:0" /></a></li>
    <li><a href="#">Sub Item 5.2.2b</a></li>
    <li><a href="#"><img src="test2.gif" style="border:0" /></a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

Inside ddlevelsmenu-base.css is the default style that applies to the sub menus in general. Add to it something like the below that targets the aforementioned UL specifically:

ul.customstyle{
border-width: 0;
}

ul.customstyle li a{
border-bottom-width: 0;
background: white;
}

It's up to you to get the CSS right as you see fit.