Linkin Uzerine Gelince Acılan Div

Merhabalar Bi host sirketinin menusu cok hosuma gitti aynısını kendi sitemede uygulamak istedim ama basarılı olamadım resimle anlattım derdimi bole bi kod yapısı orneyı varsa elinizde benimle paylasırsanız sevinirim ....

Css içinde link üzerine hover özelliği tanımlarken resim / image belirtirseniz link üzerine gelindiğinde o resim belirir.

<div class="bcn">İlk Menü
<ul class="bcn-ul">
<li>bcn1</li>
<li>bcn2</li>
<li>bcn3</li>
</ul>
</div>

html in bu olsun mesela. css inde şöyle olsa:

.bcn-ul { display:none; list-style:none; }
.bcn { display:block }
yaptık diyelim.

jquery çağırdık ve yazıyoruz:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>$(document).ready(function(){$('.bcn').hover(function(){$('.bcn-ul').slideDown("slow");},function(){$('.bcn-ul').slideUp("slow");});});</script>

bunuda sitenin head alanına yazdık tamamdır. bu benim yazış sıralamam genelde. düzgünü şöyle:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>$(document).ready(function(){$('.bcn').hover(function(){$('.bcn-ul').slideDown("slow");},function(){$('.bcn-ul').slideUp("slow");});});</script>
<style>
.bcn-ul { display:none; list-style:none; }
.bcn { display:block }
</style>

burası head in üstüne.

body arasınada :

<div class="bcn">İlk Menü
<ul class="bcn-ul">
<li>bcn1</li>
<li>bcn2</li>
<li>bcn3</li>
</ul>
</div>

tamamdır