gengen'blog

研究探讨asp.net,js,html,c#
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

下拉

Posted on 2007-01-11 19:51  gengen  阅读(150)  评论(0)    收藏  举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Author:Stupid CAT ICQ:278306428 BLOG:http://blog.sina.com.cn/u/1234091924 -->

<head>

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

<meta name="author" content="Stupid CAT" />

<title>Stupid CAT Pull-down Menu v1.0</title>

<style type="text/css">

html,body{

   background:#000000;

   height:100%;

   font-size:12px;

   font-family:Arial, Helvetica, sans-serif;

   color:#333333;

   margin:20px auto;

   overflow:hidden;

   text-align:center;}

/*菜单容器menu*/

div#menu{

   width:100%;

   height:34px;

   padding:0px 0px 0px 5px;}

/*一级菜单*/

div#menu div{

   width:125px;

   height:20px;

   float:left;

   text-transform:capitalize;

   background:#cccccc;

   padding:5px 0px 0px 0px;

   margin:4px 1px 0px 0px;}

/*二级菜单*/

div#menu div div{

   width:125px;

   height:20px;

   border-bottom:1px #333333 solid;

   background:#666666;

   margin-top:-4px;

   cursor:pointer;

   display:none;}

/*二级菜单中特殊样式（可选）*/

div#menu div div.div1{

   margin-top:3px;

   border-top:1px #333333 solid;}

</style>

</head>

 

<body>

<div id="menu">

<div>menu item1<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div>

<div>menu item2<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div>

<div>menu item3<div class="div1">sub menu1</div><div>sub menu2</div></div>

<div>menu item4<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div>

<div>menu item5<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div>

<div>menu item6<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div>

</div>

<script type="text/javascript">

var menuItem=document.getElementById("menu").getElementsByTagName("div");

for(i=0;i<menuItem.length;i++){

    menuItem[i].onmouseover=function(){

        var subMenu=this.getElementsByTagName("div");

        for(j=0;j<subMenu.length;j++){

        subMenu[j].style.display="block";

        subMenu[j].onmouseover=function(){this.style.background="#999999";this.style.color="#000000";};

        subMenu[j].onmouseout=function(){this.style.background="#666666";this.style.color="#333333";};}

        this.style.background="#666666"};

    menuItem[i].onmouseout=function(){

        var subMenu=this.getElementsByTagName("div");

        for(j=0;j<subMenu.length;j++){

        subMenu[j].style.display="none";}

        this.style.background="#cccccc"};

    }

</script>

</body>

</html>