[JavaScript][CSS][HTML] Pojawiający się obrazek po najechaniu na element menu Opcje

[lekosm2]

Witajcie, tworze sobie stronę na boostrapie i doszedłem do tworzenia menu, kod wygląda tak:

[HTML] pobierz, plaintext 
	<nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Strona główna</a></li>
            <li role="presentation"><a href="#">Menu</a></li>
			<li role="presentation"><a href="#">Rekrutacja</a></li>
            <li role="presentation"><a href="#">Kontakt</a></li>
          </ul>
        </nav>
[HTML] pobierz, plaintext 

A wygląda tak:


Chciałbym zrobić następującą rzecz.. kiedy mam aktywny element menu w tym przypadku "Strona główna", gdy najadę myszką na jakiś element dla przykładu zakładka "Kontakt", to pojawi się obrazek jakiś obrazek po lewej stronie napisu. Przykładowa wizualizacja:


W jaki sposób uzyskać taki efekt? Poda mi ktoś przykład?

[trueblue]

A masz już opracowany css dla elementu wybranego/klikniętego? Jeśli tak, to dla najechania analogicznie, :hover.

[Niree]

[HTML] pobierz, plaintext 
li:hover
{
background: red;
}
[HTML] pobierz, plaintext 

i tak dalej.