欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64739.shtml