Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>A classic CSS sliding door drop-down menu</title> <style type="text/css">* {Margin: 0; padding: 0;} body {font: normal 12px Verdana, Arial, Helvetica, sans-serif; text-align: center ;}# warpper {position: absolute; left: 100px; top: 100px;} h5 {float: left;} a {text-decoration: underline; cursor: pointer; font-weight: bold ;} dl {height: 18px; line-height: 18px; background: # f7f7f7; padding: 0 10px;} dt ,. normal {float: left; padding: 0 10px; border-right: 1px solid # ccc; text -Decoration: none; width: auto; cursor: pointer;} dt. over {position: relative; border: 1px solid #86e5f0; padding: 0 10px 15px 10px; border-bottom: 1px solid # caf1f1; margin:-1px 0 0-1px; z-index: 1000; color: # ff6026; text-decoration: underline; background: # caf1f1; height: 12px;} li {float: left; list-style-type: none; margin: 5px 10px; width: 120px;} dl dd {position: absolute; width: 500px; left: 0; top: 17 Px! Important; border: 1px solid #86e5f0; background: # caf1f1; filter: progid: DXImageTransform. microsoft. shadow (Strength = 4, Direction = 120, color = # cccccc); padding: 10px 0 ;}. block {display: block ;}. none {display: none ;}</style> <script language="javascript">Function $ (str) {return document. getElementById (str);} function $ (str) {return document. getElementsByTagName (str);} var timer; function changeMenu (thisObj, num) {if (thisObj. className = "over") return false; hids (thisObj); thisObj. className = "over"; $ ("c" + (num + 1 )). className = "block"; $ ("c" + (num + 1 )). onmouseover = function () {clearTimeout (timer) ;}$ ("c" + (num + 1 )). onmouseout = function () {timer = setTimeout (function () {hids (thisObj) ;}, 500)} thisObj. onmouseout = function () {timer = setTimeout (function () {hids (thisObj) ;}, 3000) }function hids (thisObj) {clearTimeout (timer ); var tabObj = thisObj. parentNode. getAttribute ("id"); var obj_dt = $ (tabObj ). getElementsByTagName ("dt"); for (var I = 0; I<obj_dt.length;i++){ obj_dt[i].className="normal"; $("c"+(i+1)).className="none"; } } </script> </head> <body> <dl id="warpper"> <dt onmouseover="changeMenu(this,0);">Source code enthusiasts</dt> <dd id="c1" class="none"> <ul> <li>VB remote network monitoring, file transmission, message sending instance program</li> <li>A powerful VB Network Toolkit source program</li> <li>Open source fingering exercise typing software (VB)</li> <li>Magento open-source online shop v1.2</li> </ul> </dd> <dt onmouseover="changeMenu(this,1);">Latest source code</dt> <dd id="c2" class="none"> <ul> <li>Webpage creation tutorial</li> <li>Asp fso online file management, upload, and editing system</li> </ul> </dd> <dt onmouseover="changeMenu(this,2);">Http://www.111cn.net</dt> <dd id="c3" class="none"> <ul> <li>Image slide switching effect written in Java</li> <li>VB-based drive effect</li> <li>VB simple 3D drawing code</li> <li>Php + Ajax chess game source program</li> </ul> </dd> <dt onmouseover="changeMenu(this,3);">Source code classification</dt> <dd id="c4" class="none"> <ul> <li>OsFileManager PHP website file management system v2.2</li> <li>56770 Eshop Lebi online shop opening system v8.4</li> <li>Code for implementing CLDC and MIDP underlying programming in JAVA</li> </ul> </dd> <dt onmouseover="changeMenu(this,4);">Software Download</dt> <dd id="c5" class="none"> <ul> <li>Asp fso online file management, upload, and editing system</li> <li>VB tray bubble prompt control</li> <li>Source code of a Java Network fighting game</li> <li>Online management tool v9.0</li> <li>MSSQL database management tool written in VB6</li> </ul> </dd> <dt onmouseover="changeMenu(this,5);">E-books</dt> <dd id="c6" class="none"> <ul> <li>VB remote network monitoring, file transmission, message sending instance program</li> <li>A powerful VB Network Toolkit source program</li> <li>Open source fingering exercise typing software (VB)</li> <li>Magento open-source online shop v1.2</li> <li>JBlog PHP blog v1.5</li> </li> </ul> </dd> </dl> </body> </html></td> </tr></table>
Tip: you can modify some code before running
