I've been attempting to create a mega menu that activates divs on hover, but I just can't seem to get it to work.
I've tried various methods, but the divs simply won't show when hovered over.
If you'd like to take a look, here's the basic concept in jsfiddle: http://jsfiddle.net/mXx64/5/
Below is the code:
HTML
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1">
<a href="#">menu1</a>
</li>
<li class="menu2">
<a href="#">menu2</a>
</li>
<li class="menu3">
<a href="#">menu3</a>
</li>
<li class="menu4">
<a href="#">menu4</a>
</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 assistance would be greatly appreciated!
edit Please disregard the spelling error, I'm aware of it, but fixing it doesn't resolve the issue with the code :(