JS例子（子菜单下拉）

Posted 2020-09-23 时过境迁E

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS例子（子菜单下拉）相关的知识，希望对你有一定的参考价值。

<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例子（子菜单下拉）的主要内容，如果未能解决你的问题，请参考以下文章

下拉菜单中获得数据并传到后台，js代码如何实现？

原生js应用setTimeout实现下拉菜单