css实现下拉菜单,鼠标移动到指定位置显示菜单项,移开隐藏菜单项

<!DOCTYPE html>
<html>
<head>
	<title>下拉菜单</title>
</head>
<body>
	<div class="titleBar">
		<span>下拉菜单</span>
		<div class="title">
			<p>菜单一</p>
			<p>菜单二</p>
			<p>菜单三</p>
		</div>
    </div>
</body>
<style type="text/css">
	.titleBar{
		display: inline-block;
		position: relative;
	}
	.title{
		display: none;
		position: absolute;
	}
	.titleBar:hover .title{display: block;}
</style>
</html>
posted @ 2020-04-01 14:35  海常7号  阅读(2375)  评论(0编辑  收藏  举报