:hover selector being detected even when behind another element - css

Question

So, on a page I'm making, I have a menu bar and a black box that changes color on hover. When I try to open the menu, and move the mouse over the black box (still in the boundaries of the dropdown), the drop down disappears and the black box :hover selector is called.
Basically, :hover is being detected when it's behind an element. I tried searching, but the only results I'm getting are how to force it to detect behind an element. I want to prevent that.
http://jsfiddle.net/yFD2E/13/
Important HTML:
<div class="menuBar">
<ul>
<li>Home
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</li>
<li>Home 2
<ul>
<li>Item 1</li>
</ul>
</li>
</ul>
</div> <!--End menu bar-->
<div class="center">
<div class="buttonGroup">
<div class="buttonMain">
<p class="hover">Plot</p>
<p class="show title">Plot</p>
<a class="show inFront" href="#">Test</a>
</div>
</div>
</div>
menubar.css:
.menuBar {
height: 50px;
width: auto;
background-color: #E9523F;
border-radius: 5px;
box-shadow: 0px 0px 10px #DA281F;
z-index: 10000;
}
.menuBar ul {
padding: 0;
list-style-type: none;
positoin: relative;
}
.menuBar ul li {
float: left;
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
border-radius: 5px;
}
.menuBar ul ul {
visibility: hidden;
position: absolute;
width: 80px;
border-radius: 0pxx 5px;
}
.menuBar ul ul li{
width: 80px;
height: 50px;
float: none;
position: relative;
}
.menuBar ul li a {
text-decoration: none;
color: #FAE12D;
text-align: center;
width: 80px;
line-height: 50px;
margin: 0;
padding: 0;
font-size: 17pt;
height: 50px;
display: block;
font-weight: 800;
}
.menuBar ul li:hover ul {
background-color: #DA281F;
box-shadow: 0px 0px 10px #DA281F;
}
.menuBar ul li:hover {
background-color: #DA281F;
box-shadow: 0px 0px 10px #DA281F;
}
.menuBar ul li:hover ul {
visibility: visible;
}
.menuBar ul li li:hover {
background-color: #FE3845;
}
buttons.css
.buttonMain {
height: 400px;
width: 400px;
background-color: #000;
float: left;
margin-left: 20px;
margin-right: 20px;
line-height: 400px;
}
.buttonGroup {
height: 500px;
}
.buttonMain .hover {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: center;
overflow: show;
color: #FFF;
}
.buttonMain .show {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: center;
overflow: show;
color: #FFF;
background-color: #AAF;
opacity: 0;
}
.buttonMain:hover .show {
opacity: 1;
}
.buttonMain:hover .hover {
opacity: 0;
}
.inFront {
background-color: transparent !important;
}
.title {
line-height: normal !important;
text-decoration: underline;
font-size: 30pt;
font-weight: 600;
}

Answer 1

z-index will do the trick like following
.menuBar ul {
padding: 0;
list-style-type: none;
position: relative; // Just changed the spelling of position
z-index:1000; // Added
}
http://jsfiddle.net/peqh662a/