Arrows not displaying (jQuery Multi Level CSS Menu #2)

[alexpalmbay]

I'm using the jQuery Multi Level CSS Menu #2 code.

www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

I'm having problems displaying the down and right arrows. This is my file structure:
* css
* images
* js
* pages
* index.html

Follow this link: www.intertechsol.com/test2/, and then read my results for the different browsers.

IE 8:
On Page 1, the arrows display properly. Select Page 2, and you'll see a broken image for the arrows, but the menu works.

FF 3.6:
On Page 1, the arrows display properly. Select Page 2, and no indication of an image or missing image, but the menu works.

Chrome 4.1:
On Page 1, the arrows display properly. Select Page 2, and you'll see a broken image for the arrows, but the menu works.

Opera 10.10
On Page 1, the arrows display properly. Select Page 2, and you'll see a broken image for the arrows, but the menu works.

I tried using an absolute path in the JS file for the images, but then the opposite happens: the first page no image, but an image on the second page.

I tried a different DOCTYPE, but no-go.

If I put the index, second page, and js file under the root directory, all is well. Unfortunately, this is not an option that's under consideration due to the fact that the site I'm working on has numerous folders for their divisions.

I thought this may have been an easy solution, absolute path, but apparently there's more to it than that. Any help will be greatly appreciated.

Thanks!

[katierosy]

Use the absolute path to your both the images. Eg: http://yourdomain.com/images/right-arrow.png , and http://yourdomain.com/images/bottom-arrow.png