bu eğitim ile üstteki resimde gördüğünüz ikonların üzerinden mouse ile geçtiğinizde açıklamasının göründüğü uygulamayı yapmayı öğreneceksiniz. Demo linki.CSS Kodlarıcss kodlarının arasına yönlendirmelerimi ekledim.1.body {2. font-family:georgia;3. font-size:14px;4.}5.6.a {7. text-decoration:none;8. color:#333;9. outline:0;10.}11.12.img {13. outline:0;14. border:0;15.}16.17.#menu {18. /* bunu relatif olarak kurgulamalısınız, böylece alt elementler için eksiksiz pozisyon kullanabilirsiniz */19. position:relative;20. text-align:center;21. width:583px;22. height:40px;23.}24.25.#menu ul {26. /* stil listelerini ve boşlukları kaldırın*/27. margin:0;28. padding:0;29. list-style:none;30. display:inline;31.32. /* hatasız pozisyon çünkü z-index tanımlandı */33. position:absolute;34.35. /* menü genişliğine göre menüyü ortalayın*/36. left:110px;37. top:0;38.39.}40.41.#menu ul li {42.43. /* boşluk verin */44. margin:0 5px;45.46. /* te satırlardaki parçaları görüntüleyin*/47. float:left;48.}49.50.#menu #box {51.52.53. position:absolute;54. left:0;55. top:0;56. z-index:200;57.58. /* sağ köşedeki resim*/59. background:url(tail.gif) no-repeat right center;60. height:35px;61.62.63. /* 8piksellik padding ekleyin */64. padding-right:8px;65.66. /* kutu pozisyonunu manuel belirleyin*/67. margin-left:5px;68.69.}70.71.#menu #box .head {72. /* sol köşedeki resim*/73. background:url(head.gif) no-repeat 0 0;74. height:35px;75. color:#eee;76.77.78. white-space:nowrap;79.80. /* kutu pozisyonunu manuel belirleyin*/81. padding-left:8px;82. padding-top:12px;83.}body {font-family:georgia;font-size:14px;}a {text-decoration:none;color:#333;outline:0;}img {outline:0;border:0;}#menu {position:relative;text-align:center;width:583px;height:40px;}#menu ul {/* remove the list style and spaces*/margin:0;padding:0;list-style:none;display:inline;position:absolute;left:110px;top:0;}#menu ul li {/* parçalar arasına boşluk verin*/margin:0 5px;float:left;}#menu #box {position:absolute;left:0;top:0;z-index:200;background:url(tail.gif) no-repeat right center;height:35px;/* 8px padding ekleyin */padding-right:8px;/* kutu pozisyonunu manuel belirleyin*/margin-left:5px;}#menu #box .head {background:url(head.gif) no-repeat 0 0;height:35px;color:#eee;white-space:nowrap;padding-left:8px;padding-top:12px;}Javascript
