How to hide select option with z-index?

Question

Here's the fiddle .

As you can see the select is postioned behind once you hover one of the options to reveal more panels however if select is clicked upon to reveal option and then the mouse hovers again over panels, the select remains positioned behind properly however option is in front. I've been trying to cover it with z-index but it doesn't work, or I'm having a problem somewhere else. Is there a way to fix that with z-index ?

Snippet as well:

 body { font-family: Arial; height:100%; margin: auto; vertical-align: middle; } a { text-decoration: none; } option { z-index: -1; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family:inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover > ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; z-index: 9999; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size:15px; color:black; } #version { font-style: italic; color:black; font-size: 15px; position: absolute; top: 0; left:90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color:black; } 

 <nav> <ul> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px' > Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <div style="width:400px; display: inline-block;"></div> <select> <option>hello world</option> </select> 

Answer 1

There are two ways to do this:

Method 1:

Put select in a div and apply a rule that when ever you hover over nav the focus of select should disappear.

nav:hover ~ .selecthack > select:focus{
    display:none;    
}

Method 2: Use some jQuery

1. First add link of jQuery library just before :

2. Now add this code before tag:

   $(function() { $('nav').hover(function() { $('select').blur(); }) })

 $(function() { $('nav').hover(function() { $('select').blur(); }) }) 

 body { font-family: Arial; height: 100%; margin: auto; vertical-align: middle; } a { text-decoration: none; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family: inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover>ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover>ul { opacity: 1; top: 100%; visibility: visible; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0, 0, 0, .2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size: 15px; color: black; } #version { font-style: italic; color: black; font-size: 15px; position: absolute; top: 0; left: 90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color: black; } #Title { vertical-align: top; display: inline-block; font-size: 20px; display: inline-block; text-align: center; width: 200px; z-index: -1; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray; } #TopPanel { border-bottom: 2px solid #C2082F; width: 1889px; z-index: -1; } #buttons { height: 30px; width: 30px; border: 2px gray outset; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } #buttons:hover { background-color: gray; } #ButtonsTable { background-color: white; font-weight: bold; width: 100px; height: 30px; font-size: 15px; border: 1px gray outset; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } #ButtonsTable:focus { outline: 0; } #ButtonsTable:hover { background-color: gray; cursor: pointer; } #Trova1 { display: inline-block; width: 120px; margin-right: 20px; background-color: white; color: black; font-size: 12px; margin-top: 10px; margin-left: 50px; padding: 5px; } .TrovaSelect { width: 200px; margin-top: 10px; margin-left: 15px; padding: 5px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .TrovaSelect:focus { outline: 0; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #SmallButton { height: 15px; width: 15px; border: 2px gray outset; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; } #SmallButton:hover { background-color: gray; } #afix { height: 0px; width: 0px; } .selecthack { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <div style='width:400px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px'> Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <?php include_once '/Main/FunctionsBar.php' ?> <div style="display:inline-block; width: 800px;"></div> <div id="Title" style="display:inline-block;">Ricerca sinistri</div> <div id='TopPanel'> <span id='Trova1' style="border-bottom: 1px solid gray"> Trova per luogo </span> <div class="selecthack"> <select class='TrovaSelect'> <option hidden></option> <option value='Lugano'> Lugano </option> </select> </div> <span id='Trova1' style="border-bottom: 1px solid gray"> Trova no. Pratica </span> <select class='TrovaSelect'> <option hidden></option> <option value='1'> 1 </option> </select> <span style="margin-left:100px;"></span> <a href="http://sinistri.ecsa.ch/MainPanel.php?pagina=/Sinistri/TopPanel.php&pagina2=/Sinistri/RicercaSinistro.php"> <button id="ButtonsTable"> Pannelli </button> </a> <span style="margin-left: 50px;"></span> <a href="http://sinistri.ecsa.ch/MainPanel.php?pagina=/Sinistri/TopPanel.php&pagina2=/Sinistri/InterrogazioneIncidentiLuogoOAutore.php"> <button id="ButtonsTable"> Tabelle </button> </a> <span style="margin-left: 50px;"></span> <a href="http://sinistri.ecsa.ch/Sinistri/PDFphp/SegnalazioneIncidenti-PDF.php"> <button id="ButtonsTable" style="width: 130px;"> Sinistri pdf </button> </a> <br> <span id='Trova1' style="border-bottom: 1px solid gray"> Trova per data </span> <select class='TrovaSelect'> <option hidden></option> <option value='23.07.2016'> 23.07.2016 </option> </select> <br> <br> </div> <div id="format"> <?php if (isset($_GET['p']) && $_GET['p'] == "InterrogazioneIncidentiLuogoOAutore") { include('InterrogazioneIncidentiLuogoOAutore.php'); } ?> </div> 

Answer 2

Just enough remove focus of select element when li get hover.So for remove focus use of blur funcion.

$(document).ready(function(){
  $('ul:first-child > li').hover(function(){
    $('select').blur();
  })
})

 $(document).ready(function(){ $('ul:first-child > li').hover(function(){ $('select').blur(); }) }) 

 body { font-family: Arial; height:100%; margin: auto; vertical-align: middle; } select { position: relative; left: 0; transition: all 500ms linear; } a { text-decoration: none; } option { z-index: -1; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family:inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover > ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; z-index: 9999; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size:15px; color:black; } #version { font-style: italic; color:black; font-size: 15px; position: absolute; top: 0; left:90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color:black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <nav> <ul> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px' > Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <div style="width:400px; display: inline-block;"></div> <select> <option>hello world</option> </select> 

Answer 3

Remove z-index: 9999; from

ul li {
 display: inline-block;
 position: relative;
 font-size: 25px;
 background-color: #C2082F;
 cursor: pointer;  
}

add z-index: 9999; to

ul li:hover > ul {
 opacity: 1;
 top: 100%;
 visibility: visible;
 z-index: 9999;
}

Try Following code:

 body { font-family: Arial; height:100%; margin: auto; vertical-align: middle; } a { text-decoration: none; } option { z-index: -1; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family:inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover > ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; z-index: 9999; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size:15px; color:black; } #version { font-style: italic; color:black; font-size: 15px; position: absolute; top: 0; left:90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color:black; } 

 <nav> <ul> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px' > Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <div style="width:400px; display: inline-block;"></div> <select> <option>hello world</option> </select>