Javascript + CSS: nth-child()

[batello]

Salve, devo creare una pagina web nella quale, cliccando su un link "i nostri contatti" si apre una finestra di dropdown con un triangolo-freccia che indica a quale dei tre box si riferisce; in questo modo:


Quello che non va bene è che, come si vede dalla foto, io ho tre box con tre link "i nostri contatti" ma se apro dal secondo o dal terzo box, la freccia punta sempre al primo box:
.

Sto usando tramite CSS le funzioni nth-child ma non capisco perché non funzionano.
Allego qui tutto ciò che ho scritto, se qualcuno potesse darmi una mano farebbe cosa molto gradita. Grazie.

HTML

Codice: Seleziona tutto

<div id="mercatiDropdown" class="row contattiMercatiBox yamm">
	<div class="col-xs-4 dropdown yamm-fw contattiMercatiBoxItem">
		<h2 class="titleBoxMercatiContatti">FINANZIAMENTI</h2>
		<hr/>
		<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
		<div class="dropdown-menu">
			<div class="col-xs-12 boxContattiDropDown">
				<p class="paragraphL">contatti finanziamenti MLT<br>
					Numero Verde 800.530.701<br>
					E-mail <a href="mailto:deskoperativo@mediocreditoitaliano.com">deskoperativo@mediocreditoitaliano.com</a><br>
				</p>
			</div>
		</div>
	</div>
</div>

CSS

Codice: Seleziona tutto

.boxContattiDropDown:before{
	content:"";
	display:inline-block;
	position:absolute;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #f3f3f3;
	border-left: 20px solid transparent;
	border-top-color: rgba(0, 0, 0, 1);
	top:-26px;
}

.boxContattiDropDown:nth-child(1):before{
	left:15%;
}
.boxContattiDropDown:nth-child(2):before{
	left:48%;
}
.boxContattiDropDown:nth-child(3):before{
	left:82%;
}

Come lo devo scrivere il javascript?

[SuperStep]

fai prima se la freccia la metti in posizione assoluta nel contenitore che hai cliccato. (Ottieni lo stesso effetto).

Dici che la freccia deve partire a meta' meno la dimensione della freccia con spazio dall'alto uguale al contenitore.

risulta cosi:

Codice: Seleziona tutto

+-----+
|     |
+-----+
   ^

[batello]

fai prima se la freccia la metti in posizione assoluta nel contenitore che hai cliccato. (Ottieni lo stesso effetto).

Dici che la freccia deve partire a meta' meno la dimensione della freccia con spazio dall'alto uguale al contenitore.

risulta cosi:

Codice: Seleziona tutto

+-----+
|     |
+-----+
   ^

No, Questa era la cosa che era stata fatta all'inizio ma aveva un problema:
Quando cliccavi da qualche parte a caso sullo schermo, scompariva la tendina dropdown ma rimaneva il triangolo. In questo modo invece, poiché la freccia è parte del menu dropdown. quando scompare l'uno scompare anche l'altro.