CSS div display not working - css

Question

I want the div #aboutBlurb to appear on #aboutLink:hover. I am using Foundation 5.2's grid system if that is of any relevance. Here is my code:
<div id="navBar">
<div class="row">
<div class="large-3 medium-3 small-3 columns">
<span>About</span>
</div>
</div>
<div id="aboutBlurb"><h3>blah</h3></div>
</div>
#navBar a.circleLink:hover
{
background-color: #bc2029;
color:white;
}
#aboutBlurb
{
text-align: center;
position: absolute;
width:100%;
font-size: 2em;
display:none;
}
#navBar #aboutLink:hover + #aboutBlurb
{
display:block;
}
I have tried using the ~ and > selectors as well as no selector also.

Answer 1

I know you asked for a CSS answer, but doing this with JavaScript is fairly easy. If you have jQuery installed just add this line:
$( "#aboutLink" ).hover(function() {
$( '#aboutBlurb' ).show();
});

Answer 2

To fix this need to change your DOM order please check this
#navBar a.circleLink:hover
{
background-color: #bc2029;
color:white;
}
#aboutBlurb
{
text-align: center;
position: absolute;
width:80%;
font-size: 2em;
color: red;
display: none;
}
#aboutLink:hover + #aboutBlurb
{
display:block;
}
<div id="navBar">
<div class="row">
<div class="large-3 medium-3 small-3 columns">
<span>About</span>
<div id="aboutBlurb"><h3>blah</h3></div>
</div>
</div>
</div>