实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.dropdown{
position:relative;/*相对定位*/
display:inline-block; /*显示为行块元素*/
}
.dropdown-content{
display:none;
position:absolute; /*绝对定位*/
background-color:#f9f9f9;
min-width:160px; /*菜单宽度*/
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /*设置位移量和阴影*/
z-index:1 ; /*重叠显示*/
text-align:center;
}
.dropdown:hover .dropdown-content{
display:block;
}
</style>
</head>
<body>
<h1>可悬停的下拉菜单</h1>
<p>请把鼠标移到文本上，已查看下拉内容</p>
<div class="dropdown">
<span>把鼠标移到我上面</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
运行效果：
评论