HTML&CSS----練習隱藏導航欄（三級導航）

本文轉載自查看原文 2015-12-28 09:57 2437 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>

顯示效果：

鼠標沒有指向時：

鼠標指向“新聞動態”時：

鼠標指向“場景”時：

鼠標指向“活動”時：

鼠標指向“雜談”時：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML+CSS 三級導航欄純手工 css+html 簡易三級導航欄（橫向） html css二級導航欄 css 定位與選擇器 html+css 實現三級導航三級菜單。純css實現的三級水平導航菜單用css實現三級導航菜單 html+css導航欄使用HTMl+CSS制作二級菜單或二級導航欄 css+html固定上下導航欄 HTML/CSS：導航欄水平和垂直