Cannot get :hover to function - html

Question

I am trying to get a mega menu to work by using hover to activate divs
i have tried it numerous ways, but i just cant get them to show on hover
here is the basic idea in jsfiddle : http://jsfiddle.net/mXx64/5/
and here is the code
HTML
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1">
menu1
</li>
<li class="menu2">
menu2
</li>
<li class="menu3">
menu3
</li>
<li class="menu4">
menu4
</li>
</ul>
</div>
<div class="menu-area1">
menu1
</div>
CSS
.nav-container ul li a:hover .menu-area1 {
display: block;
}
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
any help would be appreciated
edit please ignore the spelling mistake, i know its there, but the code doesnt work when it is fixed anyway :(

Answer 1

It will not work because your ".menu-area1" is not in the anchor if you want keep this structure you need to add jQuery otherwise just do like below
working- http://jsfiddle.net/R37rr/
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1"> menu1
<div class="menu-area1"> menu1 </div>
</li>
<li class="menu2"> menu2 </li>
<li class="menu3"> menu3 </li>
<li class="menu4"> menu4 </li>
</ul>
</div>
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
.nav-container ul>li:hover .menu-area1 {
display: block;
}

Answer 2

I'm not good on JQuery but this what I got:
Fiddle
$('li').hover(function () {
$('.menu-area1').show();
});
$('li').hover('out',function () {
$('.menu-area1').hide();
});