<!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>仿taobao效果</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:22px; }
li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
dl dd{ position:absolute; width:500px; left:0;top:37px!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);}
function changeMenu(thisObj,num){
if(thisObj.className=="over") return false;
var tabObj=thisObj.parentNode.getAttribute("id");
var obj_dt=$("warpper").getElementsByTagName("dt");
for(var i=0;i<obj_dt.length;i++){
if(i==num){
thisObj.className="over";
$("c"+(i+1)).className="block";
}
else{
obj_dt[i].className="normal";
$("c"+(i+1)).className="none";
}
}
}
</script>
</head>
<body>
<dl id="warpper">
<h5>拼音检索：</h5>
<dt onmouseover="changeMenu(this,0);">a</dt>
<dd id="c1" class="none">
<ul>
<li><a herf="#">Adidas</a></li>
<li><a herf="#">AEE/爱意</a></li>
<li><a herf="#">AF</a></li>
<li><a herf="#">AF棒球帽</a></li>
<li><a herf="#">Agatha</a></li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);">b</dt>
<dd id="c2" class="none">
<ul>
<li><a herf="#">fasfs</a></li>
<li><a herf="#">fsdfsd</a></li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);">c[ch]</dt>
<dd id="c3" class="none">
<ul>
<li><a herf="#">fasfs</a></li>
<li><a herf="#">fsdfsd</a></li>
<li><a herf="#">fdsfas</a></li>
</ul>
</dd> </dl>
</body>
</html> 我从网上找个，我想实现大概这个功能，但是他这个 如果点上去之后，显示那个东西 就一直在，我想当鼠标离开时，就隐藏那个东西，
应该怎么写呢，求高人解答。谢谢啦
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿taobao效果</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:22px; }
li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
dl dd{ position:absolute; width:500px; left:0;top:37px!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);}
function changeMenu(thisObj,num){
if(thisObj.className=="over") return false;
var tabObj=thisObj.parentNode.getAttribute("id");
var obj_dt=$("warpper").getElementsByTagName("dt");
for(var i=0;i<obj_dt.length;i++){
if(i==num){
thisObj.className="over";
$("c"+(i+1)).className="block";
}
else{
obj_dt[i].className="normal";
$("c"+(i+1)).className="none";
}
}
}
</script>
</head>
<body>
<dl id="warpper">
<h5>拼音检索：</h5>
<dt onmouseover="changeMenu(this,0);">a</dt>
<dd id="c1" class="none">
<ul>
<li><a herf="#">Adidas</a></li>
<li><a herf="#">AEE/爱意</a></li>
<li><a herf="#">AF</a></li>
<li><a herf="#">AF棒球帽</a></li>
<li><a herf="#">Agatha</a></li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);">b</dt>
<dd id="c2" class="none">
<ul>
<li><a herf="#">fasfs</a></li>
<li><a herf="#">fsdfsd</a></li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);">c[ch]</dt>
<dd id="c3" class="none">
<ul>
<li><a herf="#">fasfs</a></li>
<li><a herf="#">fsdfsd</a></li>
<li><a herf="#">fdsfas</a></li>
</ul>
</dd> </dl>
</body>
</html> 我从网上找个，我想实现大概这个功能，但是他这个 如果点上去之后，显示那个东西 就一直在，我想当鼠标离开时，就隐藏那个东西，
应该怎么写呢，求高人解答。谢谢啦
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿taobao效果 </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:22px; }
li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
dl dd{ position:absolute; width:500px; left:0;top:37px!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);}
function changeMenu(thisObj,num){
if(thisObj.className=="over") return false;
var tabObj=thisObj.parentNode.getAttribute("id");
var obj_dt=$("warpper").getElementsByTagName("dt");
for(var i=0;i <obj_dt.length;i++){
if(i==num){
thisObj.className="over";
$("c"+(i+1)).className="block";
}
else{
obj_dt[i].className="normal";
$("c"+(i+1)).className="none";
}
}
}function HideDiv()
{
var TagName = event.srcElement.tagName;
if(TagName != "ul" && TagName != "dd" && TagName != "li")
{
document.getElementById("c1").className = "none";
document.getElementById("c2").className = "none";
document.getElementById("c3").className = "none";
}
}
</script>
</head>
<body onclick="HideDiv()">
<dl id="warpper">
<h5>拼音检索： </h5>
<dt onmouseover="changeMenu(this,0);" onmouseout="HideDiv();">a </dt>
<dd id="c1" class="none">
<ul>
<li> <a herf="#">Adidas </a> </li>
<li> <a herf="#">AEE/爱意 </a> </li>
<li> <a herf="#">AF </a> </li>
<li> <a herf="#">AF棒球帽 </a> </li>
<li> <a herf="#">Agatha </a> </li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);" onmouseout="HideDiv();">b </dt>
<dd id="c2" class="none">
<ul>
<li> <a herf="#">fasfs </a> </li>
<li> <a herf="#">fsdfsd </a> </li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);" onmouseout="HideDiv();">c[ch] </dt>
<dd id="c3" class="none">
<ul>
<li> <a herf="#">fasfs </a> </li>
<li> <a herf="#">fsdfsd </a> </li>
<li> <a herf="#">fdsfas </a> </li>
</ul>
</dd> </dl>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿taobao效果 </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:
22px;
}
li {
float: left;
list-style-type: none;
margin: 5px 10px;
width: 120px;
}
dl dd {
position: absolute;
width: 500px;
left: 0;
top: 37px !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);
}
function changeMenu(thisObj, num){
if (thisObj.className == "over")
return false;
var tabObj = thisObj.parentNode.getAttribute("id");
var obj_dt = $("warpper").getElementsByTagName("dt");
for (var i = 0; i < obj_dt.length; i++) {
if (i == num) {
thisObj.className = "over";
$("c" + (i + 1)).className = "block";
}
else {
obj_dt[i].className = "normal";
$("c" + (i + 1)).className = "none";
}
}
}
function hideMenu(evt){
var e = evt || window.event;
var obj_dt = $("warpper").getElementsByTagName("dt"); if( $("warpper").contains(e.toElement))
return;
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" onmouseout="hideMenu();">
<h5>拼音检索： </h5>
<dt onmouseover="changeMenu(this,0);">
a
</dt>
<dd id="c1" class="none">
<ul>
<li>
<a herf="#">Adidas </a>
</li>
<li>
<a herf="#">AEE/爱意 </a>
</li>
<li>
<a herf="#">AF </a>
</li>
<li>
<a herf="#">AF棒球帽 </a>
</li>
<li>
<a herf="#">Agatha </a>
</li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);" onmouseout="hideMenu();">
b
</dt>
<dd id="c2" class="none">
<ul>
<li>
<a herf="#">fasfs </a>
</li>
<li>
<a herf="#">fsdfsd </a>
</li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);" onmouseout="hideMenu();">
c[ch]
</dt>
<dd id="c3" class="none">
<ul>
<li>
<a herf="#">fasfs </a>
</li>
<li>
<a herf="#">fsdfsd </a>
</li>
<li>
<a herf="#">fdsfas </a>
</li>
</ul>
</dd>
</dl>
</body>
</html>
//改了下你看行不
<!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>仿taobao效果 </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:22px; }
li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
dl dd{ position:absolute; width:500px; left:0;top:37px!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);}
function changeMenu(thisObj,num){
if(thisObj.className=="over") return false;
var tabObj=thisObj.parentNode.getAttribute("id");
var obj_dt=$("warpper").getElementsByTagName("dt");
for(var i=0;i <obj_dt.length;i++){
if(i==num){
thisObj.className="over";
$("c"+(i+1)).className="block";
}
else{
obj_dt[i].className="normal";
$("c"+(i+1)).className="none";
}
}
}
function leave(thisObj,num )
{
var tabObj=thisObj.parentNode.getAttribute("id");
var obj_dt=$("warpper").getElementsByTagName("dt");
for(var i=0;i <obj_dt.length;i++)
{
if(i==num)
{
thisObj.className="over";
$("c"+(i+1)).className="none";
}
}
} </script>
</head>
<body>
<dl id="warpper">
<h5>拼音检索： </h5>
<dt onmouseover="changeMenu(this,0);" onmouseout = leave(this,0)>a </dt>
<dd id="c1" class="none">
<ul>
<li> <a herf="#">Adidas </a> </li>
<li> <a herf="#">AEE/爱意 </a> </li>
<li> <a herf="#">AF </a> </li>
<li> <a herf="#">AF棒球帽 </a> </li>
<li> <a herf="#">Agatha </a> </li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);" onmouseout = leave(this,1)>b </dt>
<dd id="c2" class="none">
<ul>
<li> <a herf="#">fasfs </a> </li>
<li> <a herf="#">fsdfsd </a> </li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);" onmouseout = leave(this,2)>c[ch] </dt>
<dd id="c3" class="none">
<ul>
<li> <a herf="#">fasfs </a> </li>
<li> <a herf="#">fsdfsd </a> </li>
<li> <a herf="#">fdsfas </a> </li>
</ul>
</dd> </dl>
</body>
再做一个
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿taobao效果 </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:
22px;
}
li {
float: left;
list-style-type: none;
margin: 5px 10px;
width: 120px;
}
dl dd {
position: absolute;
width: 500px;
left: 0;
top: 37px !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);
}
function changeMenu(thisObj, num){
if (thisObj.className == "over")
return false;
var tabObj = thisObj.parentNode.getAttribute("id");
var obj_dt = $("warpper").getElementsByTagName("dt");
for (var i = 0; i < obj_dt.length; i++) {
if (i == num) {
thisObj.className = "over";
$("c" + (i + 1)).className = "block";
}
else {
obj_dt[i].className = "normal";
$("c" + (i + 1)).className = "none";
}
}
}
function hideMenu(evt){
var e = evt || window.event;
var obj_dt = $("warpper").getElementsByTagName("dt");
if ($("warpper").contains(e.srcElement))
return;
for (var i = 0; i < obj_dt.length; i++) {
obj_dt[i].className = "normal";
$("c" + (i + 1)).className = "none";
}
}
</script>
</head>
<body onmousedown="hideMenu(event);">
<dl id="warpper">
<h5>拼音检索： </h5>
<dt onmouseover="changeMenu(this,0);">
a
</dt>
<dd id="c1" class="none">
<ul>
<li>
<a herf="#">Adidas </a>
</li>
<li>
<a herf="#">AEE/爱意 </a>
</li>
<li>
<a herf="#">AF </a>
</li>
<li>
<a herf="#">AF棒球帽 </a>
</li>
<li>
<a herf="#">Agatha </a>
</li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);">
b
</dt>
<dd id="c2" class="none">
<ul>
<li>
<a herf="#">fasfs </a>
</li>
<li>
<a herf="#">fsdfsd </a>
</li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);">
c[ch]
</dt>
<dd id="c3" class="none">
<ul>
<li>
<a herf="#">fasfs </a>
</li>
<li>
<a herf="#">fsdfsd </a>
</li>
<li>
<a herf="#">fdsfas </a>
</li>
</ul>
</dd>
</dl>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿taobao效果 </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:22px; }
li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}
dl dd{ position:absolute; width:500px; left:0;top:37px!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);}
function changeMenu(thisObj,num){
if(thisObj.className=="over") return false;
var tabObj=thisObj.parentNode.getAttribute("id");
var obj_dt=$("warpper").getElementsByTagName("dt");
for(var i=0;i <obj_dt.length;i++){
if(i==num){
thisObj.className="over";
$("c"+(i+1)).className="block";
}
else{
obj_dt[i].className="normal";
$("c"+(i+1)).className="none";
}
}
}
function hide(){
var dts = document.getElementsByTagName("dt");
var dds = document.getElementsByTagName("dd");
for(var n=0;n<dts.length;n++){
dts[n].className = "normal";
}
for(var n=0;n<dds.length;n++){
dds[n].className = "none";
}
};
</script>
</head>
<body>
<div style="width:1000px; height:1000px; left:0px; top:0px; position:absolute; background-color:#FFF;" onclick="hide()">
<dl id="warpper">
<h5>拼音检索： </h5>
<dt onmouseover="changeMenu(this,0);">a </dt>
<dd id="c1" class="none">
<ul>
<li> <a herf="#">Adidas </a> </li>
<li> <a herf="#">AEE/爱意 </a> </li>
<li> <a herf="#">AF </a> </li>
<li> <a herf="#">AF棒球帽 </a> </li>
<li> <a herf="#">Agatha </a> </li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);">b </dt>
<dd id="c2" class="none">
<ul>
<li> <a herf="#">fasfs </a> </li>
<li> <a herf="#">fsdfsd </a> </li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);">c[ch] </dt>
<dd id="c3" class="none">
<ul>
<li> <a herf="#">fasfs </a> </li>
<li> <a herf="#">fsdfsd </a> </li>
<li> <a herf="#">fdsfas </a> </li>
</ul>
</dd> </dl>
</div>
</body>
</html>
给你改个兼容的。<!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=utf-8" />
<title>仿taobao效果 </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:
22px;
}
li {
float: left;
list-style-type: none;
margin: 5px 10px;
width: 120px;
}
dl dd {
position: absolute;
width: 500px;
left: 0;
top: 37px !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);
}
function changeMenu(thisObj, num){
if (thisObj.className == "over")
return false;
var tabObj = thisObj.parentNode.getAttribute("id");
var obj_dt = $("warpper").getElementsByTagName("dt");
for (var i = 0; i < obj_dt.length; i++) {
if (i == num) {
thisObj.className = "over";
$("c" + (i + 1)).className = "block";
}
else {
obj_dt[i].className = "normal";
$("c" + (i + 1)).className = "none";
}
}
}
function hideMenu(evt){
var e = evt || window.event;
var o = e.toElement || e.relatedTarget;
var obj_dt = $("warpper").getElementsByTagName("dt");
ot = o;
while(ot){
if(ot==$("warpper"))return;
ot = ot.parentNode;
}
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" onmouseout="hideMenu(event);">
<h5>拼音检索： </h5>
<dt onmouseover="changeMenu(this,0);">
a
</dt>
<dd id="c1" class="none">
<ul>
<li>
<a herf="#">Adidas </a>
</li>
<li>
<a herf="#">AEE/爱意 </a>
</li>
<li>
<a herf="#">AF </a>
</li>
<li>
<a herf="#">AF棒球帽 </a>
</li>
<li>
<a herf="#">Agatha </a>
</li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,1);">
b
</dt>
<dd id="c2" class="none">
<ul>
<li>
<a herf="#">fasfs </a>
</li>
<li>
<a herf="#">fsdfsd </a>
</li>
</ul>
</dd>
<dt onmouseover="changeMenu(this,2);">
c[ch]
</dt>
<dd id="c3" class="none">
<ul>
<li>
<a herf="#">fasfs </a>
</li>
<li>
<a herf="#">fsdfsd </a>
</li>
<li>
<a herf="#">fdsfas </a>
</li>
</ul>
</dd>
</dl>
</body>
</html>