<!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>
*{
    margin:0px;
    padding:0px;
    
    }
.aa{
    height:40px;
    width:80px;
    top:100px;
    left:100px;
    position:absolute;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#0FF;
    
}
.aaa{
    height:40px;
    width:80px;
    top:100px;
    left:100px;
    position:absolute;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:red;
    
}
#bb{
    height:120px;
    width:80px;
    top:40px;
    left:0px;
}
#table1{
    height:120px;
    width:80px;
    border:0px;
    text-align:center;
    vertical-align:middle;    
}


#table2{
    
    height:160px;
    width:80px;
    border:0px;
    text-align:center;
    vertical-align:middle;}
    
.cc{
    height:40px;
    width:80px;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#CFC;
    }
.ccc{
    height:40px;
    width:80px;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#0FC;
    
}    

#dd{
    top:-40px;
    left:80px;
    position:relative;
    
}

#table2a{
    
    height:160px;
    width:80px;
    border:0px;
    text-align:center;
    vertical-align:middle;}
    
.cca{
    height:40px;
    width:80px;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#933;
    }
.ccca{
    height:40px;
    width:80px;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#F0F;
    
}    

#dda{
    top:0px;
    left:80px;
    position:relative;
    
}
#table2b{
    
    height:160px;
    width:80px;
    border:0px;
    text-align:center;
    vertical-align:middle;}
    
.ccb{
    height:40px;
    width:80px;
    overflow:hidden;
    line-height:40px;
    text-align:center;
    background-color:#90C;
    }
.cccb{
    height:40px;
    width:80px;
    overflow:visible;
    line-height:40px;
    text-align:center;
    background-color:#CF0;
    
}    

#ddb{
    top:0px;
    left:0px;
    position:relative;
    
}

    
</style>

</head>

<body>
<div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">新闻动态

<div id="bb" >
<table cellpadding="0" cellspacing="0"  id="table1">
<tr bgcolor="#99CC00">
<td>
<div class="cc" onmouseover="this.className='ccc'" onmouseout="this.className='cc'">水果

<div id="dd">
<table cellpadding="0" cellspacing="0" id="table2">

<tr><td bgcolor="#009900">香蕉</td></tr>

<tr><td bgcolor="#FF0000">苹果</td></tr>

<tr><td bgcolor="#FFFF00">草莓</td></tr>

<tr><td bgcolor="#33FF00">西瓜</td></tr>
</table>
</div>

</div>
</td>
</tr>



<tr bgcolor="#FF99CC">
<td><div class="cca" onmouseover="this.className='ccca'" onmouseout="this.className='cca'">活动

<div id="dda">
<table cellpadding="0" cellspacing="0" id="table2a">

<tr><td bgcolor="#009900">打篮球</td></tr>

<tr><td bgcolor="#FF0000">打乒乓球</td></tr>

<tr><td bgcolor="#FFFF00">打猎</td></tr>

<tr><td bgcolor="#33FF00">旅游</td></tr>
</table>
</div>
</div>
</td>
</tr>



<tr bgcolor="#0000FF">

<td>

<div class="ccb" onmouseover="this.className='cccb'" onmouseout="this.className='ccb'">杂谈

<div id="ddb">
<table cellpadding="0" cellspacing="0" id="table2b">

<tr><td bgcolor="#009900">小说类</td></tr>

<tr><td bgcolor="#FF0000">散文类</td></tr>

<tr><td bgcolor="#FFFF00">古诗文类</td></tr>

<tr><td bgcolor="#33FF00">八卦类</td></tr>
</table>
</div>

</div></td></tr>


</table>
</div></div>


<p>打开位置的不同主要是因为dd的相对位置的坐标值不一样，当为垂直向下时，可以省去relative</p>




</body>
</html>

View Code

相关阅读:
路由配置系统（views）
Django-MTV简介
 web框架
 APScheduler
python单例模式
 mysql_istall_db
mysql多线程写入出现脏数据(重复数据)问题？
南方周末【1999年新年献词】总有一种力量让我们泪流满面
 卡特兰树通向证明
 可持久化线段树（主席树）快速简洁教程图文并茂保证学会。kth number例题
原文地址：https://www.cnblogs.com/bilibiliganbei/p/5326764.html