Indonesia
Kode efek khusus halaman web: Menu drop-down halaman web dibuat dengan CSS murni
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | tabel)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head > <meta http- equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Menu drop-down CSS murni, kompatibel dengan IE dan FF</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font- ukuran:3em; perataan teks: tengah; font-family: georgia, "times new roman", serif;} #head {height:145px; border:0;} #positioner {clear:both; 1px; z-index:100; } #ads {posisi:relatif; z-index:10;} .menu {display:none;} #noniemenu {posisi:absolute;} #noniemenu .holder {padding:0; :0;} #noniemenu .holder ul li {tipe-gaya daftar: none;} #noniemenu .holder li {} #noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {tampilan:blok; posisi:absolute ; kiri:105px; margin-atas:-20px; batas:1px solid #000;} #noniemenu .holder .bold {font-weight:bold;} #noniemenu .holder { warna:# fff; lebar:104px; tinggi: 18px; tampilan:blok; luapan:tersembunyi; :auto; } #noniemenu a.luar, #noniemenu a.outer:visited { warna:#fff; lebar:104px; tinggi garis:18px; dekorasi:tidak ada; keluarga font: verdana, arial, sans-serif; } #noniemenu a.outer:hover { latar belakang:#697210; overflow:terlihat; } #noniemenu div.open {display:none;} #noniemenu a. bagian dalam, #noniemenu a.inner: dikunjungi { display:block; width:104px; height:18px; line-height:18px; border-bottom:1px solid #000; #eee; perataan teks: tengah ; } #noniemenu a.detik {font-weight:bold;} #noniemenu a.inner:hover { latar belakang:#add; ]> <style type="text /css"> body {margin-top:-8px;} #head {height:147px;} #noniemenu {display:none;} .menu {display:block position:absolute;} .menu a.outer, .menu a.outer:visited { warna:#fff; lebar:104px; tinggi:18px; tampilan:blok; latar belakang:#e09222; -align:center; float:left ; dekorasi teks: tidak ada; font-family: verdana, arial, sans-serif; hover { latar belakang:#697210; overflow :terlihat; } .menu a.outer:hover table.first { display:block; latar belakang:#eee; border-collapse:collapse; :diunjungi { tampilan:blok; lebar :102px; tinggi:18px; batas-bawah:1px solid #000; dekorasi teks:tidak ada; :10px; perataan teks:tengah ; } .menu a.inner:hover { latar belakang:#add; } .menu a.outer table.first a.second { tinggi garis:18px; font-weight:bold; } .menu a.outer table.first a.second:hover { posisi:absolute; :-2px; kiri:102px; batas-runtuh:runtuh; latar belakang:#eee; batas:1px padat #000; font-weight:normal } </style> <![endif]--> <!--[if lte YAITU 6]> <style> #ads {display:none;} #adsie {clear:both; text-align:center; lebar:750px margin-top:10px;} </style> <![endif]- -> </head> <tubuh > <div id="wrapper"> <div id="head"> <div id="positioner"> <div class="menu"> <a class="luar" href= "../menu/index.html">DEMOS <tabel class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="Nol halaman iklan dolar">nol dolar< /a> <a class="inner" href="../menu/embed.html" title="Membungkus teks di sekitar gambar">membungkus teks</a> <a class=" inner" href="../ menu/form.html" title="Penataan bentuk">bentuk gaya</a> <a class="inner" href="../menu/nodots.html" title="Menghapus batas aktif/fokus">fokus aktif </a> <a class="detik dalam" href="../menu/hover_click.html" title="Arahkan/klik tanpa batas aktif/fokus">HOVER/KLIK > <table><tr><td > <a class="inner" href="../menu/form.html" title="Styling form">bentuk gaya</a> <a class="inner" href= "../menu/nodots.html" title="Menghapus batas aktif/fokus">fokus aktif</a> <a class="inner" href="../menu/hover_click.html" title="Hover/ klik tanpa batas aktif/fokus" >arahkan kursor/klik</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="Multi-position drop shadow">tinju bayangan</a> <a class="inner" href="../menu/old_master.html" title="Peta Gambar untuk informasi detail">peta gambar</ a> <a class="inner " href="../menu/bodies.html" title="kesenangan dengan gambar latar belakang">latar belakang yang menyenangkan</a> <a class="inner" href="../menu /fade_scroll.html" title=" fade-out scrolling">fade scrolling</a> <a class="inner" href="../menu/em_images.html" title="ukuran gambar dibandingkan">ukurannya gambar</a> </td ></tr></table> </a> <a class="outer" href="index.html">MENUS <table class="first"><tr><td > <a class="inner" href="spies.html" title="daftar mata-mata berkode">menu mata-mata</a> <a class="inner" href="vertical.html" title="a horizontal menu vertikal">menu vertikal</ a> <a class="inner" href="expand.html" title="an enlarging unordered list">memperbesar daftar</a> <a class="inner" href="enlarge .html" title="daftar tak berurutan dengan gambar tautan">gambar tautan</a> <a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a> <a class="inner" href ="jigsaw.html" title="jigsaw links">jigsaw links</a> <a class="inner" href="circles.html" title="circular links">link melingkar </a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">TATA LETAK <tabel class="first">< tr><td> <a class ="inner" href="../layouts/bodyfix.html" title="Tata letak tetap lintas browser">Memperbaiki 1</a> <a class="inner" href=". ./layouts/body2.html" title="Tata letak tetap lintas browser">Tetap 2</a> <a class="inner" href="../layouts/body4.html" title="Tata letak tetap lintas browser" >Memperbaiki 3</a> < a class="inner" href="../layouts/body5.html" title="Tata letak tetap lintas browser">Memperbaiki 4</a> <a class="inner" href= "../layouts/minimum.html" title="Tata letak lebar minimum sederhana">lebar minimum</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">KOTAK <tabel class="pertama"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="Kiri bilah gulir">gulir ke kiri</ a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a> <a class=" inner" href="../box/snazzy.html" title="Perbatasan manis">perbatasan manis</a> <a class="inner" href="../boxes/krazy.html" title="Krazy Korners">korner krazy</a > <a class="inner" href="../boxes/outside.html" title="Persentase PLUS piksel">% PLUS piksel</a> <a class="inner" href="../boxes/ minwidth.html" title="min-width untuk IE">IE min-width</a> <a class="inner" href="../boxes/minheight.html" judul ="min-height untuk IE" >IE min-height</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index. html">MOZILLA <tabel kelas= "pertama"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="Menu tarik-turun">menu tarik-turun< /a> <a class=" inner" href="../mozilla/cascade.html" title="Menu berjenjang">menu berjenjang</a> <a class="inner" href="../mozilla /content.html" title=" Menggunakan konten:">konten:</a> <a class="inner" href="../mozilla/moxbox.html" title=":hover diterapkan ke div">mozzie box</a> <a class ="inner" href="../mozilla/rainbow.html" title="Saya bisa membuat pelangi">kotak pelangi</a> <a class="inner" href=" ../mozilla/snooker.html " title="Isyarat snooker">isyarat snooker</a> <a class="inner" href="../mozilla/target.html" title="Target Practice">latihan target </a> <a class= "inner" href="../mozilla/splittext.html" title="Judul dua nada">judul dua nada</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="Teks bayangan">teks bayangan</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">PENJELAJAHI < tabel class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="Contoh satu">contoh satu< /a> <a class=" inner" href="../ie/weft.html" title="Weft font">font pakan</a> <a class="inner" href="../ie/ exampletwo.html" title="Perataan vertikal">perataan vertikal</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">OPACITY <table class= "first"><tr><td> <a class="inner" href="../opacty/colours.html" title="colour wheel">warna buram</a> <a class="inner" href ="../opacty/picturemenu.html" title="menu menggunakan opacity">menu buram</a> <a class="inner" href="../opacty/png .html" title="parsial opacity ">parsial opacity</a> <a class="inner" href="../opacty/png2.html" title="partial opacity II">parsial opacity II</a> </td></tr> </tabel> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">DEMOS</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="Iklan nol dolar page">nol dolar</a ></li> <li><a class="inner" href="../menu/embed.html" title="Membungkus teks di sekitar gambar">membungkus teks</a> </li> <li>< a class="inner" href="../menu/form.html" title="Styling form">bentuk gaya</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="Menghapus batas aktif/fokus">fokus aktif</a></li> <li><a class="inner second" href=". ./menu/hover_click.html" title="Arahkan/klik tanpa batas aktif/fokus">HOVER/KLIK ></a> <ul id="a3"> <li><a class="inner" href= "../menu/form.html" title="Penataan bentuk">bentuk yang ditata</a></li> <li><a class="inner" href="../menu/nodots.html" title ="Menghilangkan batas aktif/fokus" >fokus aktif</a></li> <li><a class="inner" href="../menu/hover_click.html" title="Arahkan/klik tanpa aktif /focus border">arahkan kursor/klik </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="Multi -posisi drop shadow">tinju bayangan </a></li> <li><a class="inner" href="../menu/old_master.html" title="Peta Gambar untuk informasi detail">peta gambar </a></li> <li><a class="inner" href="../menu/bodies.html" title="fun with background images">latar belakang yang menyenangkan</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="fade-out scrolling">scroll memudar</a></li> <li><a class="inner" href="../menu/ em_images.html" title="ukuran gambar dibandingkan">gambar berukuran </a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "luar" href="index.html">MENUS</a></li> <li><a class="inner" href="spies.html" title="a berkode daftar mata-mata">menu mata-mata< /a></li> <li><a class="inner" href="vertical.html" title="a menu vertikal horizontal">menu vertikal</a></li > <li><a class= "inner" href="expand.html" title="an enlarging unordered list">memperbesar daftar</a></li> <li><a class="inner" href=" pembesaran.html" title="daftar tak berurutan dengan gambar tautan">gambar tautan</a></li> <li><a class="inner" href="cross.html" title="tautan tidak persegi panjang" >tidak berbentuk persegi panjang</a> </li> <li><a class="inner" href="jigsaw.html" title="jigsaw links">link jigsaw</a></li> <li>< a class="inner" href= "circles.html" title="circular links">link melingkar</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">TATA LETAK</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="Tata letak tetap lintas browser">Tetap 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="Lintas browser diperbaiki layout">Memperbaiki 2</a ></li> <li><a class="inner" href="../layouts/body4.html" title="Tata letak tetap lintas browser">Memperbaiki 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="Tata letak tetap lintas browser">Memperbaiki 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="Tata letak lebar minimum sederhana">lebar minimum</a></li> </ul> </div> <div class=" holder"> <ul> <li ><a class="outer" href="../boxes/index.html">KOTAK</a></li> <li><a class="inner" href= "../boxes/scrollbars.html" title="Bilah gulir kiri">gulir kiri</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix" >IE6 3px fix</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="Snazzy border">menakjubkan perbatasan</a></li > <li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korner</a></li> <li ><a class="inner" href="../boxes/outside.html" title="Persentase PLUS piksel">% PLUS piksel</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="min-width untuk IE">IE min-width</a></li> <li><a class="inner" href="../boxes /minheight.html" title=" tinggi minimum untuk IE">tinggi minimum IE</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="outer" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="Menu tarik-turun" >Menu tarik-turun</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="Menu berjenjang"> menu berjenjang</a></ li> <li><a class="inner" href="../mozilla/content.html" title="Menggunakan konten:">konten:</a></li> <li><a class=" inner" href="../mozilla/moxbox.html" title=":hover diterapkan ke div">kotak mozzie</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="Saya bisa membuat pelangi">kotak pelangi</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="Isyarat snooker">isyarat snooker</a></li> <li><a class="inner" href="../mozilla/target.html" title="Target Latihan">latihan target</a ></li> <li><a class="inner" href="../mozilla/splittext.html" title="Judul dua nada">judul dua nada</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="Teks bayangan">teks bayangan</a></li> </ul> </div > <div class="holder" > <ul> <li><a class="outer" href="../ie/index.html">JELAJAHI</a></li> <li><a kelas ="inner" href=". ./ie/exampleone.html" title="Contoh satu">contoh satu</a></li> <li><a class="inner" href="../ie /weft.html" title=" Font pakan">font pakan</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="Penjajaran vertikal" >perataan vertikal</a>< /li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">OPACITY</a> </li> <li><a class="inner" href="../opacty/colours.html" title="colour wheel">warna buram</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="menu menggunakan opacity">menu buram</a></li> <li><a class=" inner" href="../ opacty/png.html" title="partial opacity">opacity parsial</a></li> <li><a class="inner" href="../opacty/png2 .html" title="partial opacity II">partial opacity II</a></li> </ul> </div> </div> </div> </div> <!-- ujung kepala - -> <div id="info "> <h2>DROP DOWN FUN</h2> <h1>TANPA JAVASCRIPT</h1> <h1>HANYA CSS!!!</h1> <h1 class="red">SEKARANG DENGAN CASCADE</h1> </h1> div> </div> </body> </html>
