<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> #div1{ width:260px; height:120px; padding:10px;} .inner{float:left; width:100px; height:100px; background-color:#f00; } .right_div{float:left; display:none; width:150px; height:100px; margin-left:10px; background-color:#999;} </style> <script type="text/javascript"> function goshow(){ var wa=document.getElementById("div1"); var wa2=document.getElementById("div2"); wa.style.backgroundColor="black"; wa2.style.display="block"; //wa.style.display="none"; wa.style.width="258px;"; wa.style.height="118px;"; wa.style.border="thick solid #0000FF"; }; function goback(){ var wa=document.getElementById("div1"); var wa2=document.getElementById("div2"); wa.style.backgroundColor="red"; wa2.style.display="none"; //wa.style.display="none"; wa.style.width="258px;"; wa.style.height="118px;"; wa.style.border="thick solid #999"; }; </script></head><body> <div id="div1"> <div class="inner" οnmοuseοver="goshow()" οnmοuseοut="goback()"></div> <div class="right_div" id="div2"></div> </div></body></html> --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css">* { padding: 0px; margin: 0px;}ul { list-style: none;}.big_wrapper { position: relative; width: 400px;}#tips { width: 150px; height: 30px; line-height: 30px; color: #fff; background-color: #CC2222; text-align: center; cursor: pointer;}.pro_list { width: 150px; left: 0px; position: absolute;}.pro_list li { width: 150px; height: 24px; line-height: 24px; background-color: #E84848; text-align: center;}.pro_list li.active { background-color: #f00;}.pro_list li a { color: #fff;}#content { width: 200px; left: 150px; position: absolute; background-color: #f00;}#content dl { width: 200px; height: 400px; display: none;}#content dl dd { width: 200px; height: 400px; display: none;}</style> </head> <body><div id="tips">全部产品</div><div class="big_wrapper"> <div class="pro_list" id="pro_list" style="display:block"> <ul id="list"> <li><a href="">男性用品</a></li> <li><a href="">女性用品</a></li> <li><a href="">老年用品</a></li> <li><a href="">儿童用品</a></li> <li><a href="">青少年用品</a></li> <li><a href="">人妖</a></li> </ul> </div> <div id="content"> <dl> <dt>1</dt> <dd>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</dd> </dl> <dl> <dt>2</dt> <dd>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</dd> </dl> <dl> <dt>3</dt> <dd>cccccccccccccccccccccccccccccccccccccccccc</dd> </dl> <dl> <dt>4</dt> <dd>dddddddddddddddddddddddddddddddddddddddddd</dd> </dl> <dl> <dt>5</dt> <dd>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</dd> </dl> <dl> <dt>6</dt> <dd>ffffffffffffffffffffffffffffffffffffffffff</dd> </dl> </div> </div><script type="text/javascript">window.onload = function() { var ontips = document.getElementById('tips'); var s_c2 = document.getElementById('list'); var sc_li = s_c2.getElementsByTagName('li'); var b_c = document.getElementById('content'); var bc_li = b_c.getElementsByTagName('dl'); var i = 0; var timer = null;for (i = 0; i < sc_li.length; i++) {
sc_li[i].index = i;
sc_li[i].onmouseover = function() { if (timer) { clearTimeout(timer); timer = null; } for (i = 0; i < sc_li.length; i++) { sc_li[i].className = ''; bc_li[i].style.display = 'none'; } sc_li[this.index].className = 'active'; bc_li[this.index].style.display = 'block';};
sc_li[i].onmouseout = function() {
var index = this.index; timer = setTimeout(function() { sc_li[index].className = ''; bc_li[index].style.display = 'none'; timer = null; }, 1000); };bc_li[i].index = i;
bc_li[i].onmouseover = function() { if (timer) { clearTimeout(timer); timer = null; } };bc_li[i].onmouseout = function() {
var index = this.index; timer = setTimeout(function() { sc_li[index].className = ''; bc_li[index].style.display = 'none'; timer = null; }, 1000); };ontips.onclick = function() {
if (s_c.style.display == 'block') { s_c.style.display = 'none'; } else { s_c.style.display = 'block'; } }}
}
</script></body></html>