码迷,mamicode.com
首页 > Web开发 > 详细

JS例子(子菜单下拉)

时间:2017-06-20 13:41:19      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:top   style   技术分享   class   lock   mouse   ddl   ima   splay   

<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:1000px;
      height:50px;
	  margin-top:100px;}
.zong{ width:500px;
       height:50px;
	   text-align:center;
	   line-height:50px;
	   vertical-align:middle;
	   float:left;
	   border:1px solid #F00;}
.zi{ width:0px;
      height:0px;
	  float:left;}
.ziwai{ width:500px;
        height:152px;
		border:1px solid #F00;
		position:relative;
		top:51px;
		left:-502px;
		}
.se{ width:500px;
     height:50px;
	 text-align:center;
	 line-height:50px;
	 vertical-align:middle;
	 border-bottom:1px solid #F00;
	 }




</style>

  

<body>

       <div id="wai">
           <div class="zong" onmousemove="xian(‘yanse‘)" onmouseout="yin(‘yanse‘)">颜色</div>
               <div class="zi">
                 <div class="ziwai" id="ziwai" onmousemove="shi(this)" onmouseout="cang(this)">     
                    <div class="se">红</div>
                    <div class="se">黄</div>
                    <div class="se">绿</div>
                 </div>
               </div>
       
       
       
      
       
     </div>
       






</body>
<script type="text/javascript">
function xian(yanse){
	var a = document.getElementById("ziwai");
	a.style.display = "block";
}

function yin(yanse){
	var b = document.getElementById("ziwai");
	b.style.display = "none";
}


function shi(c){
	c.style.display = "block";
}
function cang(d){
	d.style.display = "none";
}
</script>

  技术分享技术分享

JS例子(子菜单下拉)

标签:top   style   技术分享   class   lock   mouse   ddl   ima   splay   

原文地址:http://www.cnblogs.com/nsl714745601/p/7053655.html

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