: выбор переключателя зависания, даже если за другим элементом

Question

Итак, на странице, которую я делаю, у меня есть панель меню и черный ящик, который меняет цвет при наведении. Когда я пытаюсь открыть меню и наведите указатель мыши на черный ящик (все еще в границах выпадающего списка), выпадающее меню исчезнет, ​​и вызывается черный ящик: селектор hover.

В принципе, наведение обнаруживается, когда оно находится за элементом. Я попытался выполнить поиск, но единственными результатами, которые я получаю, является то, как заставить его обнаруживать за элементом. Я хочу это предотвратить.

http://jsfiddle.net/yFD2E/13/

Важно HTML:

<div class="menuBar"> 
    <ul> 
     <li><a href="#">Home</a> 
      <ul> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 1</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Home 2</a> 
      <ul> 
       <li><a href="#">Item 1</a></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 сделает три- ск как следующий

.menuBar ul { 
    padding: 0; 
    list-style-type: none; 
    position: relative; // Just changed the spelling of position 
    z-index:1000; // Added 
} 

http://jsfiddle.net/peqh662a/