Tip: you can modify some code before running
<style> #warpper{position:relative;FLOAT:LEFT; } dl{padding:0 ;float:left;margin-left:60px} #warpper dt,.normal{ float:left; padding:0 6px; text-decoration:none; cursor:pointer;color:#000} #warpper dt.over{ position:relative;border:1px solid #6b6b6b; padding:0 6px 7px 5px; border-bottom:0px solid #c3e7eb; z-index:1000; color:#ff6026; text-decoration:underline; background:#dddddd; height:16px; } #warpper dd ul li{ float:left; list-style-type:none; margin:5px 10px; width:94px;} #warpper dd ul li a{ cursor:pointer; text-decoration:underline; color:#333333} #warpper dd{ position:absolute; width:543px; left:-40px;top:26px!important; border:1px solid #9a9a9a; background:#dddddd; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:10px 0 15px;} #warpper dl{ position:absolute; width:600px; left:0;top:0px!important; border:1px solid #9a9a9a; background:#dddddd; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:0px 0;} .block{ display:block;} .none{ display:none;} </style><script charset="utf-8">Function XMenu (o) {this. $ = function (o) {return document. getElementById (o);} this. $ = function (o, str) {return o. getElementsByTagName (str);} this. obj = o; this. bind ();} XMenu. prototype = {bind: function () {var xxx = this. $ (this. obj); // get the object to be passed. I did not handle fault tolerance here. This object does not exist. If necessary, make your own judgment. Var xdt = this. $ (xxx, 'DT '); // Obtain all dt var xdd = this. $ (xxx, 'DD'); // obtain all the dd var xdtl = xdt. length; // get several dt xxx ['obj '] = xdt [0]; // add an attribute obj to the passed object, the value is the first dd for (var I = 0; I<xdtl; i++){//循环 该对象下的所有的 dd，并为它添加onmouseover事件。 xdt[i]['dd'] = xdd[i];//给当前对象添加一个属性dd,值为，与它相对应的dd对象，它的作用是在移动到当前对象的时候给与它相对应的dd设置样式用的。 xdt[i]['div'] = xxx;//给当前对象添加一个属性div，值为，调用XMenu时，所传入的参数所对应的对象。 xdt[i].onmouseover = function(){ this['div']['obj'].className = 'normal'; this['div']['obj']['dd'].className = 'none'; this.className = 'over'; this['dd'].className = 'block'; this['div']['obj'] = this; } } xxx.onmouseout = function(){ var d = this;//用来保存当前的xxx对象 this.hide = setTimeout(function(){ d['obj'].className = 'normal'; d['obj']['dd'].className = 'none'; d = null; },1000); //鼠标移出后几秒隐藏。在这里设置时间[秒数*1000] } xxx.onmouseover = function(){ if(this.hide){ clearTimeout(this.hide); } } } } window.onload = function (){//在文档onload事件绑定事件处理函数。 new XMenu('warpper'); //传入id。该对象下的所有dt将会被绑定onmouseover事件。 }</script> <dl id="warpper"><dt>A</dt><dd class="none"> <ul> <li>Adidas</li> <li>AEE/Love</li> <li>AF</li> <li>AF baseball cap</li> <li>Agatha</li> <li>Albion/Orbin</li> <li>AMD</li> <li>Andox</li> <li>Arini</li> <li>Epson</li> </ul> </dd> <dt>B</dt><dd class="none"> <ul> <li>Adidas</li> <li>AEE/Love</li> <li>AF</li> <li>Download website source code</li> <li>Agatha</li> <li>Albion/Orbin</li> </ul> </dd></dl>
Tip: you can modify some code before running
