css实现hover显示下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
css实现hover显示下拉菜单
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
原理比較簡(jiǎn)單，首先先隱藏下拉菜單即display:none，當(dāng)鼠標(biāo)hover后，設(shè)置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>總結(jié)
以上是生活随笔為你收集整理的css实现hover显示下拉菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTML <span> 标签
- 下一篇： MapReduce 过程详解 (用Wor