子菜单下拉
Posted 桃花灬仙人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了子菜单下拉相关的知识，希望对你有一定的参考价值。
子菜单下拉
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px;} #items{width:760px; height:50px;} .itema{ width:150px; height:50px; background-color:#666; border-right:1px solid #000; float:left; color:#fff; text-align:center; line-height:50px; vertical-align:middle} .itema:hover{ cursor:pointer} .hid{ width:0px; height:0px; float:left; position:relative; top:50px; left:-150px} .hid1{ width:150px; height:50px; line-height:50px; vertical-align:middle; text-align:center; background-color:#0F0} </style> </head> <body> <div id="items"> <div class="itema">产品详情</div> <div class="hid" style=" display:none"> //做一个0大小的div <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">新闻中心</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">公司动态</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">关于我们</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> <div class="itema">联系我们</div> <div class="hid" style=" display:none"> <div class="hid1">123</div> <div class="hid1">123</div> <div class="hid1">123</div> </div> </div> </body> </html> <script type="text/javascript"> var itema = document.getElementsByClassName("itema") for(var i=0;i<itema.length;i++) { itema[i].onmouseover = function() { this.nextSibling.nextSibling.style.display = "block"; } } //鼠标移上时，展开 for(var i=0;i<itema.length;i++) { itema[i].onmouseout = function(){ this.nextSibling.nextSibling.style.display = "none"; } } //鼠标移出时，收回 </script>
效果图：
以上是关于子菜单下拉的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 4.1 中悬停时将子菜单下拉项向右移动？
我想在 React 中做一个下拉菜单。单击一个按钮应打开一个子菜单。在子菜单之外单击应将其关闭