求一个这样的弹出菜单效果代码，100分

Question

用div+css做的额,自己找点例子看看吧

Answer 1

//左菜单关于详细分类div 2008-10-16
function initSort(){
    sortArray=[
    ["管理",book+"01.22.htm",
    "个人理财/炒股",book+"01.24.htm",
    "求职",list+"01.21.33.htm"
    ],
    [  
    "科普",book+"01.52.htm",
    "建筑",book+"01.55.htm",
    "医学",book+"01.56.htm",
    "农林",list+"01.66.html",
    "自然科学",book+"01.62.html",
    "工业技术",book+"01.63.html",
    "通信",list+"01.63.07.html",
    "电工",list+"01.63.05.html",
    "机械",list+"01.63.03.html",
    "环境",list+"01.63.24.html",
    "水利水电",list+"01.63.20.html",
    "金属工艺",list+"01.63.13.html",
    "汽车交通",list+"01.63.22.html",
    "轻工",list+"01.63.18.html",
    "化工",list+"01.63.09.html",
    "标准",list+"01.63.30.html"
    ],    
    [
    "青春文学",book+"01.01.htm",
    "励志",book+"01.21.htm",
    "动漫",book+"01.09.htm"
    ],
    [],
    [
        "小说",book+"01.03.htm",
        "文学",book+"01.05.htm",
        "传记",book+"01.38.htm",
        "艺术",book+"01.07.htm",
        "动漫",book+"01.09.htm",
    "美术",stat+"book/contents/1890/9950.html",
    "摄影",stat+"book/contents/1890/9941.html",
    "音乐",stat+"book/contents/1890/9951.html"
    ],
    [],
    [
        "文化",book+"01.34.htm",
        "历史",book+"01.36.htm",
        "哲学宗教",book+"01.28.htm",
        "古籍",book+"01.32.htm",
        "政治/军事",book+"01.27.htm",
        "法律",book+"01.26.htm",
        "经济",book+"01.25.htm",
    "社会科学",book+"01.30.htm",
    "心理学",list+"01.30.06.htm",
    "教育学",list+"01.30.07.htm",
    "新闻传播",list+"01.30.04.htm"
    ],
}    
100分少了哦，可以自己把网站另存为，然后看它源代码`,有没有Api不知道.

Answer 2

商品分类？
下拉菜单吗？
<select name="">
这样行吗？

Answer 3

自己写了一个showdetails的第一个参数，需要和数组的第一个元素对应
比如 123 和 123 对应，456 和 456 对应<a href="http://www.google.cn" onmouseover="showdetails('123',this)">图书</a>
|
<a href="http://www.google.cn" onmouseover="showdetails('456',this)">电脑</a>
<script>
var array = new Array();
array.push(["123","http://www.sina.com.cn","新浪1"]);
array.push(["123","http://www.sina.com.cn","新浪2"]);
array.push(["123","http://www.sina.com.cn","新浪3"]);
array.push(["123","http://www.sina.com.cn","新浪4"]);
array.push(["123","http://www.sina.com.cn","新浪5"]);
array.push(["123","http://www.sina.com.cn","新浪6"]);
array.push(["123","http://www.sina.com.cn","新浪7"]);
array.push(["123","http://www.sina.com.cn","新浪8"]);
array.push(["123","http://www.sina.com.cn","新浪9"]);
array.push(["123","http://www.sina.com.cn","新浪10"]);array.push(["456","http://www.163.com","1631"]);
array.push(["456","http://www.163.com","1632"]);
array.push(["456","http://www.163.com","1633"]);
array.push(["456","http://www.163.com","1634"]);
array.push(["456","http://www.163.com","1635"]);
array.push(["456","http://www.163.com","1636"]);var bgColor = "white";// 背景颜色
var borderColor = "black";// 边框颜色/*****************************上面的代码可以修改************************/
function init(){
var firstdiv = document.createElement("div");
firstdiv.id = "firstdiv";
firstdiv.style.width = "60px";
firstdiv.style.height = "25px";
firstdiv.style.position = "absolute";
firstdiv.style.backgroundColor = bgColor;
firstdiv.style.borderTop = "1px solid " + borderColor;
firstdiv.style.borderLeft = "1px solid " + borderColor;
firstdiv.style.borderRight = "1px solid " + bgColor;
firstdiv.style.borderBottom = "1px solid " + borderColor;
firstdiv.style.lineHeight = "30px";
firstdiv.style.zIndex = "2";
firstdiv.style.display = "none";
firstdiv.onmouseover = function(){overfirst = true;oversecond = true;};
(document.body || document.documentElement).appendChild(firstdiv); var seconddiv = document.createElement("div");
seconddiv.id = "seconddiv";
seconddiv.style.width = "240px";
seconddiv.style.position = "absolute";
seconddiv.style.backgroundColor = bgColor;
seconddiv.style.border = "1px solid " + borderColor;
seconddiv.style.lineHeight = "30px";
seconddiv.style.textAlign = "center";
seconddiv.style.zIndex = "1";
seconddiv.style.display = "none";
seconddiv.onmouseover = function(){overfirst = true;oversecond = true;};
(document.body || document.documentElement).appendChild(seconddiv);
}function hidediv(){
document.getElementById("firstdiv").style.display = "none";
document.getElementById("seconddiv").style.display = "none";
}function showdetails(id,link){
var firstdiv = document.getElementById("firstdiv");
var seconddiv = document.getElementById("seconddiv"); firstdiv.innerHTML = "<a target=\"_blank\" href=\"" + link.href + "\"><b>" + link.innerHTML + "</b></a>";
seconddiv.innerHTML = "";
for(var i = 0; i < array.length; i++){
if(array[i][0] == id){
seconddiv.innerHTML += "<a style=\"width:58px\" target=\"_blank\" href=\"" + array[i][1] + "\">" + array[i][2] + "</a> | ";
}
} firstdiv.style.top = getTop(link) - 6;
firstdiv.style.left = getLeft(link);
firstdiv.style.display = "block"; seconddiv.style.top = getTop(link) - 6;
seconddiv.style.left = getLeft(link) + firstdiv.offsetWidth - 1;
seconddiv.style.display = "block";
}//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset += getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset += getLeft(e.offsetParent);
return offset;
}window.onload = init;
document.onclick = hidediv;
</script>

Answer 4

document.onclick = hidediv;//改这个为鼠标离开

Answer 5

我刚才尝试加了句seconddiv.onmouseout = function(){hidediv();}; 这个,但是还是有问题,鼠标一进入那个弹出的大框就隐藏了.怎么解决?

Answer 6

改了一下：延迟1秒隐藏<a href="http://www.google.cn" onmouseover="showdetails('123',this)">图书</a>
|
<a href="http://www.google.cn" onmouseover="showdetails('456',this)">电脑</a>
<script>
var array = new Array();
array.push(["123","http://www.sina.com.cn","新浪1"]);
array.push(["123","http://www.sina.com.cn","新浪2"]);
array.push(["123","http://www.sina.com.cn","新浪3"]);
array.push(["123","http://www.sina.com.cn","新浪4"]);
array.push(["123","http://www.sina.com.cn","新浪5"]);
array.push(["123","http://www.sina.com.cn","新浪6"]);
array.push(["123","http://www.sina.com.cn","新浪7"]);
array.push(["123","http://www.sina.com.cn","新浪8"]);
array.push(["123","http://www.sina.com.cn","新浪9"]);
array.push(["123","http://www.sina.com.cn","新浪10"]);array.push(["456","http://www.163.com","1631"]);
array.push(["456","http://www.163.com","1632"]);
array.push(["456","http://www.163.com","1633"]);
array.push(["456","http://www.163.com","1634"]);
array.push(["456","http://www.163.com","1635"]);
array.push(["456","http://www.163.com","1636"]);var bgColor = "white";// 背景颜色
var borderColor = "black";// 边框颜色/*****************************上面的代码可以修改************************/
var overfirst = false;
var oversecond = false;
function init(){
var firstdiv = document.createElement("div");
firstdiv.id = "firstdiv";
firstdiv.style.width = "60px";
firstdiv.style.height = "25px";
firstdiv.style.position = "absolute";
firstdiv.style.backgroundColor = bgColor;
firstdiv.style.borderTop = "1px solid " + borderColor;
firstdiv.style.borderLeft = "1px solid " + borderColor;
//firstdiv.style.borderRight = "1px solid " + bgColor;
firstdiv.style.borderBottom = "1px solid " + borderColor;
firstdiv.style.lineHeight = "30px";
firstdiv.style.zIndex = "2";
firstdiv.style.display = "none";
firstdiv.onmouseover = function(){overfirst = true;};
firstdiv.onmouseout = function(){
overfirst = false;
hidediv();
};
(document.body || document.documentElement).appendChild(firstdiv); var seconddiv = document.createElement("div");
seconddiv.id = "seconddiv";
seconddiv.style.width = "240px";
seconddiv.style.position = "absolute";
seconddiv.style.backgroundColor = bgColor;
seconddiv.style.border = "1px solid " + borderColor;
seconddiv.style.lineHeight = "30px";
seconddiv.style.textAlign = "center";
seconddiv.style.zIndex = "1";
seconddiv.style.display = "none";
seconddiv.onmouseover = function(){oversecond = true;};
seconddiv.onmouseout = function(){
oversecond = false;
hidediv();
};
(document.body || document.documentElement).appendChild(seconddiv);
}function hidediv(){
setTimeout("temp123()", 1000);
}function temp123(){
if(!overfirst && !oversecond){
document.getElementById("firstdiv").style.display = "none";
document.getElementById("seconddiv").style.display = "none";
}
}function showdetails(id,link){
var firstdiv = document.getElementById("firstdiv");
var seconddiv = document.getElementById("seconddiv"); firstdiv.innerHTML = "<a target=\"_blank\" href=\"" + link.href + "\"><b>" + link.innerHTML + "</b></a>";
seconddiv.innerHTML = "";
for(var i = 0; i < array.length; i++){
if(array[i][0] == id){
seconddiv.innerHTML += "<a style=\"width:58px\" target=\"_blank\" href=\"" + array[i][1] + "\">" + array[i][2] + "</a> | ";
}
} firstdiv.style.top = getTop(link) - 6;
firstdiv.style.left = getLeft(link);
firstdiv.style.display = "block"; seconddiv.style.top = getTop(link) - 6;
seconddiv.style.left = getLeft(link) + firstdiv.offsetWidth - 1;
seconddiv.style.display = "block";
}//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset += getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset += getLeft(e.offsetParent);
return offset;
}window.onload = init;
document.onclick = hidediv;
</script>