<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0padding:0}
ul{list-style-type: none}
ul>li{float:leftmargin-right: 10pxposition: relativewidth:100px}
li>span{display: noneposition: absolutetop: 20pxbackground: #ccc}
li:hover >span{display: block}
</style>
</head>
<body>
<ul>
<li>提示<span>任务中心</span></li>
<li>提示<span>通知</span></li>
<li>提示<span>装扮</span></li>
</ul>
</body>
</html>
下面的代码就是css实现的鼠标悬停，你看下是不是你要的。不行就追问我。可能样式不是你想要的，你可以自行修改一下样式。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0padding:0}
ul{list-style-type: none}
ul>li{float:leftmargin-right: 10pxposition: relativewidth:100px}
li>span{display: noneposition: absolutetop: 20pxbackground: #ccc}
li:hover >span{display: block}
</style>
</head>
<body>
<ul>
<li>提示<span>任务中心</span></li>
<li>提示<span>通知</span></li>
<li>提示<span>装扮</span></li>
</ul>
</body>
</html>
