Как сделать стрелочку сбоку от меню a:hover

[belosnezka]

Добрый день.

Не могу понять как реализовать при наведении на пункт меню, меняется цвет и плюс сбоку уголок.

<div id="menu-left"><ul class="menu"><li><a href="#" > Новая модель</a></li><li><a href="#" > Новый реион</a></li><li><a href="#" > Новый мерчендайзер</a></li><li><a href="#" > Новый POS</a></li><li><a href="#" > Новая акция</a></li><li><a href="#" > Новая модель конкурентов</a></li></ul></div>

#menu-left{height:227px;float:left;margin-bottom:10px;}ul.menu {list-style-type:none;padding:0;width:227px;height:25px;}ul.menu  li {background:url('img/bg-menu.jpg') repeat-x;border:1px solid #aeaeae;border-radius:9px;text-align:center;text-shadow:1px 1px 0px #fff;color:#767676;height:25px;margin-top:10px;font: 8pt sans-serif;line-height:25px;display: block;}ul.menu  li a{text-shadow:1px 1px 0px #fff;color:#767676;width:227px;height:25px;text-decoration: none;display: block;}ul.menu li a:hover{	background: url('img/bg-men-hover.jpg') repeat-x ;	width:226px;height:25px;	border:1px solid #589f29;	border-radius:9px;	display:block;	color:#fff; /* цвет букв в активном состоянии */	text-shadow: #628b47 1px 1px 0;	/* цвет тени у букв в активном состоянии */	margin-top:-1px;;display: block;}

Это итог:

[Galaxy]

для блока position relative и :after в котором абсолютом задается эта стрелка (css геометрические фигуры)

[ryter]

для блока position relative и :after в котором абсолютом задается эта стрелка (css геометрические фигуры)

у стрелки бордер dotted еще и с тенью думаю картинкой в самый раз соответственно картинку в спрайт и :after на элемент

Edited December 6, 2013 by ryter

[Galaxy]

думаю можно и не картинкой а через z-index,так даже интереснее будет.

[belosnezka]

Большое спасибо)))) Сработало.

Пока правда сделала картинкой, а не бордером.