鼠标悬浮场景十分常见，例如导航菜单，当鼠标hover到某个菜单到时候，它到子菜单就显示出来。代码场景有两种：
1、菜单menu紧挨着user（不推荐）
利用相邻选择器，把它显示出来即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.2 鼠标悬浮时显示菜单</title>
</head>
<style>
/* helper */
.menu {
background: red;
}
.menu {
display: none;
}
/* 利用相邻选择器，把它显示出来 */
.user:hover + .menu {
display: block;
}
.menu:hover {
display: block;
}
</style>
<body class="home">
<ul>
<li class="user">用户</li>
<li class="menu">
<ul>
<li>用户设置</li>
<li>退出</li>
</ul>
</li>
</ul>
</body>
</html>
这里有一个问题，通常menu和导航需要有空隙来显得美观，如果用margin就会失去hover，但用padding又会影响样式。
其实这个也很简单，只需要在menu上面再画一个透明的区域即可：
.menu:before {
content:"";
width: 100%;
height: 20px; /* 菜单与导航栏间距 */
}
2、使用子元素，这个更简单易懂（强烈推荐）
把目标和隐藏的对象当做同一个父容器的子元素，然后hover写在这个父容器上面就可以了。
也不用像上面一样，隐藏的元素本身也要写个hover。而且导航和菜单的间距，也可以通过菜单本身来margin自由发挥了。
值得注意一点是，li是不能包含另一个li的。所以这里使用div作为父容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.2 鼠标悬浮时显示菜单</title>
</head>
<style>
/* helper */
.menu ul{
background: red;
}
.menu {
display: none;
}
.user:hover .menu {
display: block;
}
</style>
<body class="home">
<div class="user">用户
<li class="menu">
<ul>
<li>用户设置</li>
<li>退出</li>
</ul>
</li>
</div>
</body>
</html>