VIP会员
购物车
私信
发表新帖
立即签到
关注
回复
支持(
反对(
首页上一页 1 下一页尾页 1 条记录 1/1页
div制作下拉菜单
发表在HTML/CSS答疑区
2016-08-18
是否精华
是
否
版块置顶:
是
否
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.menubar{
position: absolute;top: 10px;width: 100px;height: 20px;cursor: default;
border-width: 1px;border-style: outset;color: #99FFFF;background: #669900;
}
.menu{
position: absolute;top: 32px;width: 140px;display: none;border-width: 2px;
border-style: outset;border-color: white;border-color: #333399;
padding: 15px;
}
.menu A{
text-decoration: none;color: #99FFFF;
}
.menu A:hover{
color: #99FFFF;
}
</style>
</head>
<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size: 15px">
<tr>
<td width="20%">
<div align="center" id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">教育网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">电脑丛书网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">新出网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">其他网站
</div>
</td>
</tr>
<tr>
<td width="20%">
<div align="center" id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">重庆大学</a>
<a href="#">四川大学</a>
<a href="#">北京大学</a>
</div>
</td>
<td width="20%">
<div align="center" id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">html图书</a>
<a href="#">javascript图书</a>
<a href="#">java图书</a>
</div>
</td>
<td width="20%">
<div align="center" id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">蛮</a>
<a href="#">易</a>
<a href="#">信</a>
</div>
</td>
<td width="20%">
<div align="center" id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">明日科技主页</a>
<a href="#">明日科技图书馆</a>
<a href="#">明日技术支持网</a>
</div>
</td>
</tr>
</table>
</body>
<script language="JavaScript">
function divControl(show){
window.event.cancelable=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numlID=objID.substring(0,index+1);
if(mainID=="Tdiv"){
if(show==1){
eval("showdiv("+"Div"+numlID+")");
}
else{
eval("hidediv("+"Div"+numlID+")");
}
}
}
var nbottom= 0,speed=2;
function dispiayMenu(obj){
obj.style.clip="rect(0 100%"+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100){
timerID=setTimeout("displayMenu(("+obj.id+"),1)");
}
else clearTimeout(timerID);
}
function showdiv(obj){
obj.style.display="block";
obj.style.clip="rect(0 0 0 0 0)";
nbottom=5;
dispiayMenu(obj);
}
function hidediv(obj) {
nbottom = 0;
obj.style.display = "none";
}
function keeepstyle(obj){
obj.style.display="block";
}
</script>
</html>
为什么没有下拉的效果，书上给我实例程序也没有效果啊
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.menubar{
position: absolute;top: 10px;width: 100px;height: 20px;cursor: default;
border-width: 1px;border-style: outset;color: #99FFFF;background: #669900;
}
.menu{
position: absolute;top: 32px;width: 140px;display: none;border-width: 2px;
border-style: outset;border-color: white;border-color: #333399;
padding: 15px;
}
.menu A{
text-decoration: none;color: #99FFFF;
}
.menu A:hover{
color: #99FFFF;
}
</style>
</head>
<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size: 15px">
<tr>
<td width="20%">
<div align="center" id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">教育网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">电脑丛书网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">新出网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">其他网站
</div>
</td>
</tr>
<tr>
<td width="20%">
<div align="center" id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">重庆大学</a>
<a href="#">四川大学</a>
<a href="#">北京大学</a>
</div>
</td>
<td width="20%">
<div align="center" id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">html图书</a>
<a href="#">javascript图书</a>
<a href="#">java图书</a>
</div>
</td>
<td width="20%">
<div align="center" id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">蛮</a>
<a href="#">易</a>
<a href="#">信</a>
</div>
</td>
<td width="20%">
<div align="center" id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">明日科技主页</a>
<a href="#">明日科技图书馆</a>
<a href="#">明日技术支持网</a>
</div>
</td>
</tr>
</table>
</body>
<script language="JavaScript">
function divControl(show){
window.event.cancelable=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numlID=objID.substring(0,index+1);
if(mainID=="Tdiv"){
if(show==1){
eval("showdiv("+"Div"+numlID+")");
}
else{
eval("hidediv("+"Div"+numlID+")");
}
}
}
var nbottom= 0,speed=2;
function dispiayMenu(obj){
obj.style.clip="rect(0 100%"+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100){
timerID=setTimeout("displayMenu(("+obj.id+"),1)");
}
else clearTimeout(timerID);
}
function showdiv(obj){
obj.style.display="block";
obj.style.clip="rect(0 0 0 0 0)";
nbottom=5;
dispiayMenu(obj);
}
function hidediv(obj) {
nbottom = 0;
obj.style.display = "none";
}
function keeepstyle(obj){
obj.style.display="block";
}
</script>
</html>
为什么没有下拉的效果，书上给我实例程序也没有效果啊
分享到：
