dl+ol aplikasi analisis_pertukaran pengalaman

Tajuk: Latihan dl+ol
Pengarang: Aoao

Kali lepas li simulasi dl~dl tak tahu nak buat apa~Saya minta ol buat senarai kompaun bersama-sama~

Ini Selain berlatih css, saya juga menggunakan beberapa JS
Mari kita lihat demo hodoh dahulu kerana saya terlalu malas baru-baru ini dan tidak membuat gaya yang cantik

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Pembelajaran dl</title> <style type="text/css"> dl * { margin: 0; padding: 0; font-size:12px; } dl { width: 405px; height:128px; border:1px #000 solid; } dt { width:120px; height: 32px; line-height: 32px; text-align: center; } dt a { display: block; text-decoration: none; } dt.ing a { background:#efefef; } dd { position: absolute; display: none; width:280px; background-color: #fff; } dd li { line-height: 16px; list-style-type: none; text-align:right; color:#999; } dd li a { float:left; display:inline; padding-left:5px; } dd.ing { display: block; } dd.no { display:none; } dd#d1 { margin-top:-32px; margin-left:120px; } dd#d2 { margin-top:-64px; margin-left:120px; } dd#d3 { margin-top:-96px; margin-left:120px; } dd#d4 { margin-top:-128px; margin-left:120px; } </style> <dl> <dt id="t1"> <a href="#" onmouseover="return show('1');"></a>Menu Ujian 1</dt> <dd id="d1"> <ol> <li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24</ol> </dd> <dt id="t2" class="ing"> <a href="#" onmouseover="return show('2');"></a>Menu Ujian 2</dt> <dd id="d2" class="ing"> <ol> <li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu 2)</li>1-24</ol> </dd> <dt id="t3"> <a href="#" onmouseover="return show('3');"></a>Menu ujian tiga</dt> <dd id="d3"> <ol> <li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 3)</li>1-24</ol> </dd> <dt id="t4"> <a href="#" onmouseover="return show('4');"></a>Menu ujian empat</dt> <dd id="d4"> <ol> <li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li> <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24</ol> </dd> </dl>