我正在尝试创建一个html页面，该页面有一个在元素悬停时显示的部分。我在CSS中使用了:hover + .myclass。在我尝试定位元素之前，它一直运行良好。我需要显示的div有一个背景色，但当我在div中定位元素时，背景色消失了！这是我的html文件：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Social">
<meta name="description" content="Web-app to find and befriend new people!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
display: block;
position: fixed;
top:0%;
left:0%;
height: 100%;
width: 3%;
padding:0%;
margin: 0%;
background-color: greenyellow;
}
.big_menu {
display: none;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.big_menu:hover {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.menu:hover + .big_menu {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
</style>
</head>
<body>
<div class="menu">
<p style="position: absolute; top: 5%; left: 5.8%">Home</p>
</div>
<div class="big_menu">
<p style="position: absolute; top: 5%; left: 5.8%;">Details</p>
</div>
</body>
</html>有人能向我解释为什么会发生这种情况以及如何解决吗？
ETA正确答案：
Temani的回答是正确的，但我可以详细说明：绝对定位的元素从文件流中删除。简单地从第二个p元素中去除绝对位置就足以使背景显示
位置：绝对高度和父高度？