HTML&CSS----练习隐藏导航栏（三级导航）

最新推荐文章于 2021-03-16 22:26:22 发布

weixin_33735077

最新推荐文章于 2021-03-16 22:26:22 发布

阅读量293

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/0927wyj/p/5081644.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*
{ 
   margin:0px;
   padding:0px;}
#aa
{
    height:40px;
    width:90px;
    top:80px;
    left:200px;
    background-color:#339;
    position:absolute;
    overflow:hidden;
    text-align:center;
    line-height:40px;
}
#bb
{
    height:120px;
    width:90px;
    top:40px;
    left:0px;
    background-color:#3FC;
    position:absolute;
}
table
{
    height:120px;
    width:90px;
    border:0px;
    text-align:center;
}
#cc
{
    height:40px;
    width:90px;
    position:absolute;
    left:0px;
    top:0px;
    overflow:hidden;
    background-color:#6F6;
    
}
#dd
{
    height:40px;
    width:90px;
    background-color:#666;
    position:absolute;
    left:90px;
    top:0px;
    
}
#ee
{
    height:40px;
    width:90px;
    position:absolute;
    left:0px;
    top:40px;
    overflow:hidden;
    background-color:#6F9;
    
}
#ff
{
    height:40px;
    width:90px;
    background-color:#666;
    position:absolute;
    left:90px;
    top:0px;
    
}
#gg
{
    height:40px;
    width:90px;
    position:absolute;
    left:0px;
    top:80px;
    overflow:hidden;
    background-color:#F99;
    
}
#hh
{
    height:40px;
    width:90px;
    background-color:#666;
    position:absolute;
    left:90px;
    top:0px;
    
}
</style>
</head>
<body>
<div id="aa" onmouseover="over()"  onmouseout="out()">新闻动态
<div id="bb">
<table cellpadding="0" cellspacing="0">
<tr>
<td height="40px" width="90px">
<div id="cc" onmouseover="over1()" onmouseout="out1()">场景
<div id="dd">讲座</div></div></td></tr>
<tr><td height="40px" width="90px"><div id="ee" onmouseover="over2()" onmouseout="out2()">活动<div id="ff">比赛</div></div></td></tr>
<tr><td height="40px" width="90px"><div id="gg" onmouseover="over3()" onmouseout="out3()">杂谈<div id="hh">项目</div></div></td></tr>
</table>

<script>
function over()
{
 var a = document.getElementById("aa");
 a.setAttribute("style","overflow:visible;background-color:yellow");}
function out()
{
var a = document.getElementById("aa");
 a.setAttribute("style","overflow:hidden");
}
function over1()
{
 var a = document.getElementById("cc");
 a.setAttribute("style","overflow:visible;background-color:green");}
function out1()
{
var a = document.getElementById("cc");
 a.setAttribute("style","overflow:hidden");
}
function over2()
{
 var a = document.getElementById("ee");
 a.setAttribute("style","overflow:visible;background-color:yellow");}
function out2()
{
var a = document.getElementById("ee");
 a.setAttribute("style","overflow:hidden");
}
function over3()
{
 var a = document.getElementById("gg");
 a.setAttribute("style","overflow:visible;background-color:red");}
function out3()
{
var a = document.getElementById("gg");
 a.setAttribute("style","overflow:hidden");
}
 </script>
</div></div>
</body>
</html>

显示效果：

鼠标没有指向时：

鼠标指向“新闻动态”时：

鼠标指向“场景”时：

鼠标指向“活动”时：

鼠标指向“杂谈”时：

转载于:https://www.cnblogs.com/0927wyj/p/5081644.html

weixin_33735077

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS----练习隐藏导航栏（三级导航）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><...
复制链接

扫一扫