Problems Displaying Div on :hover - html

Question

I'm trying to achieve the effect of having text show when I hover over it. I looked at another question: Using only CSS, show div on hover over <a> , and tried out some of the solutions, but they are not working for me. Here is my code: https://codepen.io/anon/pen/PLYGyg. Thanks!
div#thesishereyay {
margin-top: 50px;
margin-left: 120px;
position: absolute;
opacity: 0;
background-color: #000000;
}
h4.thesis {
margin: 10px;
}
li.thesisbutton {
position: absolute;
margin-top: 15px;
margin-left: 112px;
opacity: 1;
}
.thesisbutton:hover div.thesishereyay {
opacity: 1;
}
<ul class="nav">
<li class="thesisbutton">Thesis</li>
</ul>
<div id="thesishereyay">
<h4 class="thesis">
Thirst for triumph during the<br>
Vietnam war in order to prevent<br>
a U.S. humiliation led to Lyndon<br>
Johnson lying to the American public<br>
about the Gulf of Tonkin incident to<br>
gain support for the Gulf of Tonkin<br>
resolution, which resulted in the<br>
continuation of the war and the<br>
tragedy of more lives being lost<br>
for a war being fought in fear of what<br>
might happen if the U.S. was defeated.</h4>
</div>

Answer 1

You can make something like this.
div#thesishereyay {
margin-top: 50px;
margin-left: 120px;
position: absolute;
opacity: 0;
background-color: #000000;
}
h4.thesis {
margin: 10px;
}
li.thesisbutton {
position: absolute;
margin-top: 15px;
margin-left: 112px;
opacity: 1;
}
.nav:hover ~ #thesishereyay {
opacity: 1;
}
<div class="main">
<ul class="nav">
<li class="thesisbutton">Thesis</li>
</ul>
<div id="thesishereyay">
<h4 class="thesis">
Thirst for triumph during the<br>
Vietnam war in order to prevent<br>
a U.S. humiliation led to Lyndon<br>
Johnson lying to the American public<br>
about the Gulf of Tonkin incident to<br>
gain support for the Gulf of Tonkin<br>
resolution, which resulted in the<br>
continuation of the war and the<br>
tragedy of more lives being lost<br>
for a war being fought in fear of what<br>
might happen if the U.S. was defeated.</h4>
</div>
</div>

Answer 2

This the basic markup:
ul > li > div {display:none;} /* hide div inside li */
ul > li:hover > div {display: block;} /* show div when li hovered */
<ul class="nav">
<li class="thesisbutton">Thesis
<div id="thesishereyay">...</div>
</li>
</ul>
Hope that helps.

Answer 3

I know this is not css which you want, but maybe will help to somebody :)
$('#thesishereyay').on('mouseenter mouseleave', function(e) {
var $block = $('#thesishereyay');
if(e.type == 'mouseenter') {
$block.show();
} else if(e.type == 'mouseleave') {
$block.hide();
}
});

Answer 4

Not sure if this is what you're looking for but take a look:
li.hoverbutton {
position: relative;
}
#hoveron {
top: 100%;
left: 0;
position: absolute;
display: none;
background-color: #000000;
}
h4.showonhover {
padding: 10px;
color: #ffffff;
}
li.hoverbutton:hover #hoveron {
display: block;
}
<ul class="nav">
<li class="hoverbutton">
Hover!
<div id="hoveron">
<h4 class="showonhover">Text to show</h4>
</div>
</li>
</ul>