pure css3 menu

Ahoj. Potreboval by som radu ohladne horizontalneho css menu. Povedzme mam jednoduche menu:

#menu { width:900px; list-style:none; margin:0 auto; padding:0; text-align:right; }

#menu li{ display:inline; border-right: 1px solid #cacaca;}

#menu a{ display:inline-block; padding:12px; padding-left:20px; text-decoration:none; font-size:17px; font-family: Arial, Helvetica, sans-serif; color: #1d1d1d;}

pod jednotlivé odkazy by som chcel aby sa pri hover zobrazovala táto šípka:

.arrow {
display:inline-block;
width:7px;
height:7px;
line-height:7px;
border-top:3px solid #aaa;
border-right:3px solid #aaa;
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
}

Mate prosím niekto nápad ako to spraviť? Ďakujem za rady...

Napr. takto:

Ale aj teraz sa zobrazí, keďže nie je skrytá.

No nakoniec som to poriešil, ale aj tak diki za radu:

#menu ul { overflow: hidden; }

#menu li { display: block; float: left; list-style: none; padding: 8px 15px; position: relative; text-align: center; width: 60px; border-right: 1px solid #cacaca;
}

#menu li a{ display:inline-block; text-decoration:none; font-size:17px; font-family: Arial, Helvetica, sans-serif; color: #1d1d1d; }



#menu li:hover::after {

bottom: -5px;
content: ' ';
display: block;
height: 10px;
left: 50%;
position: absolute;
width: 10px;
z-index: 99;

display:inline-block;
width:7px;
height:7px;
line-height:7px;
border-top:3px solid #aaa;
border-right:3px solid #aaa;
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
}


po tých sviatkoch mi to myslí pomalšie no