Приветствую всех! Есть такой код HTML:

<ul class="navigation">
			<li><a href="#">Пункт 1</a></li>
			<li><a href="#">Пункт 2</a></li>
			<li><a href="#">Пункт 3</a></li>
			<li class="item"><a href="#">Пункт 4</a>
				<ul>
					<li><a href="#">Раскрывающийся пункт 1</a></li>
					<li><a href="#">Раскрывающийся пункт 2</a></li>
					<li><a href="#">Раскрывающийся пункт 3</a></li>
					<li><a href="#">Раскрывающийся пункт 4</a></li>
					<li><a href="#">Раскрывающийся пункт 5</a></li>
					<li><a href="#">Раскрывающийся пункт 6</a></li>
						</ul>
			</li>
			</ul>

и CSS код:

.navigation {
   list-style: none;
}
.navigation li {
   float: left; 
   margin-right: 1px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
}
.navigation li a {
   display: block;
   padding: 15px 20px;
   
   color: #3f3f3f;
   text-decoration: none;
   position: relative;
}
.navigation li a:hover {
   color: #6b6b6b;
}

Подскажите пожалуйста, как к последнему пункту (раскрывающийся список) сделать стрелку? Заранее спасибо.