CSS KULLANARAK AÇILIR MENÜ YAPIMI ·

CSS KULLANARAK AÇILIR MENÜ YAPIMI

ÖRNEK 1

ÖRNEK 2

ÖRNEK 3

WEB FORM

ÖRNEK 2

<html> <head> <link rel="stylesheet" type="text/css" href="sablon.css" /> </head> <body> <ul id="hmenu"> <li class="Aktif"><a href="bilgisayar.aspx">BILGISAYAR </a></li> <ul id="sub-menu"> <li><a href="#">Bilgisayar </a></li> <li><a href="#">Elektronik </a></li> <li><a href="http://www.google.com.tr">Kontrol</a></li> </ul> <li><a href="#">MAKINE </a></li> <li><a href="#">METAL </a></li> </ul> </body>

</html> body { font: 14px Arial,Helvetica, sans-serif; background: #eee; width:900px; margin:100px auto; color:#666; } a { color:#333;} #Bolum { margin: 0; padding: 7px 6px 0; background: #2b2b2b; line-height: 100%; display: inline-block; } #Bolum li { margin: 0 5px; padding: 0 0 8px; float:left; position:relative; list-style:none; } #Bolum a { font-weight: bold; color: #e7e5e5; text-decoration:none; display:block; padding: 8px 20px; margin:0; } #Bolum a:hover { background: #000; color:#fff; } #Bolum .Aktif a, #Bolum li:hover > a { background: #ddd; color:#666; border-top:2px solid #df63lf; } #Bolum ul li:hover a, #Bolum li:hover li a

{ background: none; border: none; color:#666; } #Bolum ul a:hover { color:black!important; } #Bolum li:hover>ul { display:block; } #Bolum ul { display:none; margin:0; } #Bolum li:hover > ul { display:block; } #Bolum ul { dipslay:none; margin:0; padding:0; width:185px; position:absolute; top:35px; left:0; background:#ddd; border:1px solid #b4b4b4; } #Bolum ul li { float:none; margin: 0px; padding:0px; } #Bolum ul a { font-weight:normal;} #Bolum ul ul {left:180px;top:-1px}

ÖDEV: CSS VE LİSTE KULLANARAK AŞAĞIDAKİ ÜÇ UYGULAMAYI BİR ÖDEV İÇİNDE

GERÇEKLEŞTİRİN.

Documents

CSS KULLANARAK AÇILIR MENÜ YAPIMI ·