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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM