Witam potrzebuję zrobić menu w którym po najechaniu na przycisk nad buttonem pokaże się mały trójkącik. Wygląda to tak:


Oczywiście mogę to zrobić na hoverach ale tak będzie chyba bardziej profesjonalniej, co o tym sądzicie?

Proszę o wskazówki czego szukać, bo ja nie mam zupełnie pomysłu..

div - obrazek z trojkacikiem na fioletowym tle - prosta funkcja w JS a raczej dwie i zdarzenie na divie onMouseOver (f. pokazujaca) i onMouseOut (f. chowajaca)

[JAVASCRIPT] pobierz, plaintext 
function pokaz() {
 document.... style.display = "block"
}
[JAVASCRIPT] pobierz, plaintext 

i analogiczna funkcja chowajaca tyle ze zamiast block - none

Będzie idiotyczniej, a nie profesjonalniej.

Co to jest efekt żaróweczki? Bo mnie zaciekawiłeś teraz.

Najlepiej to będzie zrobić właśnie w CSS poprzez element:hover {} i podmianę/ustawienie tła elementu. Babranie się przy tym z JS trąci amatorszczyzną.

Tyle, że element w tym przypadku, to powinien być <a>, bo - jak dobrze pamiętam - któreś z IE ma problem np. z li:hover

Ta IE6... - nawet nie patrz już na tę przeglądarkę...

Postarałem się zrobić tak jak radziliście jednak napotkałem na pierwszy i ma nadzieje ostatni problem. Otóż podczas podmiany tła rzeczywiście trójkącik się pojawia, ale niestety po samym napisem z menu. Wygląda to tak:
http://weselnydom.radom.pl/

Próbowałem wgrać większy obrazek tzn. z dłuższym przezroczystym paskiem na dole żeby niejako podnieśc trójkącik ale to niestety nic nie daje. Kombinowałem z margin-top itp. ale to również nie przynosi efektu..

Kod odpowiedzialny za tworzenie menu:

[HTML] pobierz, plaintext 
						<div id="menu">
 
							<ul>
								<li><a href="/?id=home">Home</a></li>
								<li><img src="/images/strip.jpg" alt="strip"></li>
								<li><a href="/?id=home">Oferta</a></li>
								<li><img src="/images/strip.jpg" alt="strip"></li>
								<li><a href="/?id=home">Galeria</a></li>
								<li><img src="/images/strip.jpg" alt="strip"></li>
								<li><a href="/?id=home">Dojazd</a></li>
								<li><img src="/images/strip.jpg" alt="strip"></li>
								<li><a href="/?id=home">Kontakt</a></li>
							</ul>
[HTML] pobierz, plaintext 

i CSS:

[HTML] pobierz, plaintext 
#menu {
	float : right;
	overflow : hidden;
	position : absolute;
	margin-left : 275px;
	margin-top : 35px;
	word-spacing : 20px;
}
#menu a {
	color : #fff;
	font-size : 1.1em;
	text-decoration : none;
	font-weight : normal;
	vertical-align : super;
}
#menu a:hover {
	background : url(/images/tro.gif);
	background-repeat : no-repeat;
} 
[HTML] pobierz, plaintext 

Ustaw tło dla li:hover, skoro robisz to na liście. Ewentualnie wywal listę i ustaw display:block dla a, a później dla niego odpowiednio width/height/padding, tak, żeby strzałka pasowała.

Niestety ale to nie pomoga, obrazek nad wyswietla się tylko pod tekstem a nie nad nim..

Musisz przebudować to swoje całe menu, bo tak nie może być, wzoruj się na jakimś przykładzie.

Tylko skąd taki przykład wziąć, kiedyś już coś takiego zrobiłem ale oparte na obrazkach a nie tekście, tutaj jednak wolałbym żeby był to tekst..

http://cssmenumaker.com/builder/menu_info.php?menu=032#

Zerknij na www.casaverde.com.pl
Czy o takie wyświetlanie ci chodziło?
Oczywiście tekst TU JESTEŚ możesz zamienić na obrazek.

Nie, chodzi mi poprostu aby ten trójkącik pojawiał jak nad najechany przyciskiem tak jest jest teraz nad Strona Główna