css实现hover显示下拉菜单
原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block。
<style> .menu-title { postion: relative; } .menu-list { display: none; position: absolute; right: 0; top: 0; } .menu-title:hover .menu-list { dispaly: block; } </style> <body> <div> <div class="menu-title">菜单</div> <div class="menu-list"> <div>菜单1</div> <div>菜单2</div> <div>菜单3</div> </div> </div> </body>