HTML sayfalarımızda CSS komutlarından yararlanarak yatay açılır menü oluşturma anlatılmıştır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <html> <head> <style type="text/css"> ul ,ol { list-style:none; } ol, ul , li { margin:0; padding:0; } .menu a { line-height:25px; font-weight:bold; text-align:center; text-decoration:none; display:block; border:1px solid orange; background:grey; color:black; } .menu a:hover { color:grey; background:yellow; } .menu li { float:left; margin-right:5px; position:relative; width:200px; } .menu ul { display:none; position:absolute; } .menu li:hover > ul { display:block; } .menu ul ul { left:200px; top:0px; } </style> </head> <body> <ul class="menu"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Ürünler</a> <ul> <li><a href="#">Kulübeler</a></li> <li><a href="#">Mamalar</a> <ul> <li><a href="#">Köpek Maması</a></li> <li><a href="#">Kedi Maması</a></li> </ul> </li> </ul> </li> <li><a href="#">Referanslar</a></li> <li><a href="#">Albüm</a></li> <li><a href="#">İletişim</a></li> </ul> </body> </html> |
