Проблемче с едно вертикално меню

[jaffy]

Добър ден на всички!

Имам едно вертикално меню, което обаче не е точно меню ..
В смисъл то са стрелкички с транспарантен фон и се опитвам да ги сложа като бекграунд на <li> и да ги направя с ховър ефект.

С това меню например: http://www.javascriptkit.com/script/script2/verticalmenu.shtml

И пътища до стрелкичките:
нормална - images/sarrow.png
ховър - images/sarrowh.png

Как ще стане трика? Аз опитах с бекраунд на <li> ама нещо изобщо не я показва дори.. не ми се получи.. или ако имате друга алтернативна идея с джава скрипт или без как от стрелкичката с ховър ефект да пада меню на дясно?

Благодаря!

 

[IzKuFeLiQqQqQ]

.glossymenu .arrowdiv:hover{
position: absolute;
right: 2px;
background: transparent url(sarrowh.png ) no-repeat center right;
}

:idea: :idea:

 

[jaffy]

Май не съм се изразил правилно, идеята е това да се получи:

От стрелката да излиза падащото меню. Тая стрелка няма текст няма нищо и е с транспарентен бекграунд.

 

[mita6ky]

.glossymenu .arrowdiv{
position: absolute;
left: 2px;
background: transparent url(arrow.gif) no-repeat center left;
}

на .glossymenu li a{

padding-left: 10px;

го правиш 20 примерно за другото не разбрах

 

[jaffy]

Мне и това не е..
Добре справих се обаче сега ми е въпросно как да разделя с разстояние - <li> тука примерно:

<ul>
<li></li>
<li></li>
</ul>

т.е. да има 5px разстояние между всяко листирано.

Иначе за това ставаше въпрос:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 18px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: transparent url(images/sarrow.png) no-repeat left;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(images/sarrowh.png);
}

 

[jaffy]

.glossymenu .arrowdiv{
position: absolute;
left: 2px;
background: transparent url(arrow.gif) no-repeat center left;
}

на .glossymenu li a{

padding-left: 10px;

го правиш 20 примерно за другото не разбрах

+1

Това най ме наведе до по-горния отговор. А относо втория ми въпрос всичко се оправя с едно   в хиперлинк таг и размер на фонта 22 пиксела примерно