Проблема с a:hover

[Thunder]

Есть некое меню. Напротив каждого элемента меню стоит маленький треугольник малинового цвета. При наведении на элемент - бэкграунд меняется на картинку с градиентов. Все дело в том, что нужно чтобы и треугольник малиновый менялся на белый. Но бэкграунд с градиентом перекрывает это и поэтому треугольник не учитывается. Неоднакратно видел на различных сайтах подобное и все работало. Что нужно исправить?

То есть перекрывается и треугольник и бекграунд, а нужно только, чтобы перекрывался треугольник.

Можно посмотреть пример:

http://files.mail.ru/M1R4BM

(прошу прощения за ссылку на сторонний ресурс, но как иначе?)

[Yazon_Nile]

залей сайт на какой-то хостинг. Качать и распаковывать лень, извини))

[Thunder]

http://website.16mb.com/menu-vertical.html

[SelenIT]

Проще всего нарисовать белый треугольник на градиентной картинке, как красный нарисован на сером . Но можно как-то так.

И да, никакого мусора (кроме комментов и пробельных символов) между <ul> и <li> быть не должно, а то браузеры за себя не отвечают!