模拟凡客导航

<!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;
400px;
}
#tips {
150px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: #CC2222;
text-align: center;
cursor: pointer;
}
.pro_list {
150px;
left: 0px;
position: absolute;
}
.pro_list li {
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 {
200px;
left: 150px;
position: absolute;
background-color: #f00;
}
#content dl {
200px;
height: 400px;
display: none;
}
#content dl dd {
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>