码迷,mamicode.com
首页 > 其他好文 > 详细

二级菜单制作

时间:2014-05-22 05:32:48      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:style   c   java   ext   http   color   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>二级菜单</title>

<style type="text/css">

#tabMenu

{

width:150px;

}

#tabMenu a

{

width:150px;

display:block;

height:30px;

line-height:30px;

text-align:center;

background-color:#CCC;

color:black;

text-decoration:none;

border:solid 1px;

}

#tabMenu a:hover

{

color:#FFF;

background-color:red;

}

#tabMenu div

{

position:absolute;

z-index:10;/*把后面的层隐藏了*/

display:none;

}

</style>

<script type="text/javascript">

function showmenu(num)

{

document.getElementById("menu"+num).style.display="block";

}

function hidemenu()

{

document.getElementById("menu"+num).style.display="none";

}

</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" id="tabMenu">

<tr>

<td><a href="" onMouseOver="showmenu(1)" onMouseOut="hidemenu(1)">编程语言</a></td>

<td><a href="" onMouseOver="showmenu(2)" onMouseOut="hidemenu(2)">WEB开发</a></td>

<td><a href="" onMouseOver="showmenu(3)" onMouseOut="hidemenu(3)">产品中心</a></td>

</tr>

<tr>

<td>

<div id="menu1">

<a href="">JAVA详解</a>

<a href="">C++详解</a>

<a href="">C语言详解</a>

</div>

</td>

<td>

<div id="menu2">

<a href="">Javascript</a>

<a href="">Html</a>

<a href="">Css+DIV</a>

</div>

</td>

<td>

<div id="menu3">

<a href="">网络管理软件</a>

<a href="">系统优化大师</a>

<a href="">音乐播放器</a>

</div>

</td>

</tr>

</table>

</body>

</html>

二级菜单制作,布布扣,bubuko.com

二级菜单制作

标签:style   c   java   ext   http   color   

原文地址:http://www.cnblogs.com/JAYIT/p/3738163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!