创建下拉菜单：
<style> *{ margin: 0px; padding: 0px; list-style: none; } #nav-banner{ border-radius: 10px; /*所有边框*/ width: 500px; height: 50px; background-color: aqua; } .nav-i{ border-radius: 10px; width: 100px; max-height: 50px; float: left; text-align: center; line-height: 50px; overflow: hidden; /*超出部分隐藏*/ } .nav-i:hover{ border-radius: 10px; background-color: antiquewhite; cursor: pointer; max-height: 500px; transition: 0.5s;/*动画*/ } .nav-i:li{ opacity: 0.5 ; } .nav-ii li{ border-radius: 10px; height: 50px; line-height: 50px; text-align: center; background-color: #ADD8E6; } .nav-ii li:hover{ border-radius: 10px; background-color: antiquewhite; cursor: pointer; } </style> </head> <body> <div id="nav-banner"> <div class="nav-i">首页</div> <div class="nav-i">公司简介 <ul class="nav-ii"> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> </ul> </div> <div class="nav-i">产品展示 <ul class="nav-ii"> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> </ul></div> <div class="nav-i">合作伙伴 <ul class="nav-ii"> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> </ul></div> <div class="nav-i">联系方式 <ul class="nav-ii"> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> <li>aaaaaaaa</li> </ul></div> </div> <div style="position: absolute;">1233466556623323</div> </body></html>
转载于:https://www.cnblogs.com/hljj/p/6767367.html
相关资源：点击Button弹出下拉菜单