HTML Select Drop Down Option Z-index

Question

I have a simple select drop down when I am going to select an option there is Menu navigation item, so now when I am going to hover on menu items navigation is going back to select option list which is open. It's happening in all browsers. I don't know whether it's a bug or what. Steps are:

• Open select dropdown options
• Same time hover on navigation menu items
• Now the navigation items are going behind the option list (not behind the select tag)

I have tried giving z-index with positions. But nothing is working. I think its not an issue but need explanation on same. Any suggestions will be greatly appreciated.

This is the sample code:

    <style type="text/css">
/* ####################   Navigation bar CSS styling   ################## */

.mynavbar {
    position: relative;
  width: 100%;
  height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
  margin: 0; border: 0; padding: 0;
  background-color: #666633;
}


a.navbartitle {
  display: block;
  float: left;
  color: white;
  background-color:  #666633;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0; border: 0; padding: 0;
  line-height: 23px; /* corresponds to 'top' value of .submenu below */
  text-align: center;
  text-decoration:none;
}
a.navbartitle:hover {
  background-color: #447755;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 180px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
    a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
    Using these fixed values isn't as elegant as just letting the text of each
    menu title determine the width of the menu titles and position of the submenus,
    but we found this hardwired approach resulted in fewer cross-browser/cross-OS
    formatting glitches -- and it's pretty easy to adjust these title widths and the
    corresponding submenu 'left' positions below, just by eyeballing them whenever
    we need to change the navbar menu titles (which isn't often). */

.submenu {
    position:absolute;
  z-index: 2;
  top: 23px; /* corresponds to line-height of a.navbartitle above */
  padding: 0; margin: 0;
    width:166px; /* If adjust this, then adjust width of .submenu below a too */
    color: white;
    background-color:  #666633;
    border: 1px solid #447755; /* box around entire sub-menu */
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
    font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */

/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
   If you adjust menu title text, you might want to adjust these too. */
#products_submenu {  left: 0px; visibility: hidden;  }
#services_submenu {  left: 104px; visibility: hidden;  }
#funstuff_submenu {  left: 204px; visibility: hidden; }
#aboutus_submenu {  left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
    the mouse goes over the menu title. Using the 'visibility' property instead
    of using the 'display' property avoided a bug in some versions of Safari.
    (The bug is pretty where esoteric: The browser ignored the 'hover' property
    on 'li' objects inside an object whose display property was set to 'none'
    when the page loaded...) Using the 'visibility' property instead of 'display'
    would normaly take up extra room on the page, but that's avoided here by putting
    the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
    in .submenu definition, higher up this page. */

.submenu a
{
  display: block;
  color: #eee;
  background-color: #666633;
  width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
  padding: 5px 0px 4px 20px;
  text-decoration: none;
  background-color: #666633;
  border-bottom: #447755 dotted 1px;
  border-top: 0; border-left: 0; border-right: 0;
}


ul { position: relative; display: block; }
li { position: relative; display: block; }

.submenubox {
  margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
  margin: 0; padding: 0; border: 0;
  list-style-type: none;
}

.submenubox ul li {
  margin: 0; padding: 0; border: 0;
}

.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
  color: #c6e8e2; /* text color for submenu items */
  background-color: #447755;
  border-bottom: #447755 dotted 1px;
}


</style>
<script type="text/javascript">
// JavaScript functions to show and hide drop-down menus.
// In SimpleNavBar.html we call ShowMenuDiv each time the mouse goes over
// either the menu title or the submenu itself, and call HideMenuDiv when the
// mouse goes out of the menu title or the submenu iteslf (onMouseOut).

function ShowItem (itemID) {
  var x = document.getElementById(itemID);
  if (x)
    x.style.visibility = "visible";
  return true;
}

function HideItem (itemID) {
  var x = document.getElementById(itemID);
  if (x)
     x.style.visibility = "hidden";
  return true;
}

//    As noted in the SimpleNavBarStyles.css file, using x.style.visibility as
//    seen below seemed to have better cross browser support than using
//    x.style.display="block" and x.style.display="none" to show and hide
//    the menu.
</script>
<div class="mynavbar">

<a onmouseover="ShowItem('products_submenu');" onmouseout="HideItem('products_submenu');" href="placeholder.html" id="t1" class="navbartitle">Products</a><a onmouseover="ShowItem('services_submenu');" onmouseout="HideItem('services_submenu');" href="placeholder.html" id="t2" class="navbartitle">Services</a><a onmouseover="ShowItem('funstuff_submenu');" onmouseout="HideItem('funstuff_submenu');" href="placeholder.html" id="t3" class="navbartitle">Fun Stuff</a><a onmouseover="ShowItem('aboutus_submenu');" onmouseout="HideItem('aboutus_submenu');" href="placeholder.html" id="t4" class="navbartitle">About Us</a><a onmouseover="ShowItem('contact_submenu', 't5');" onmouseout="HideItem('contact_submenu');" href="placeholder.html" id="t5" class="navbartitle">Contacts &amp; Directions</a>


<!-- REPLACE each "placeholder.html" URL below with the specific page you want
      the user to go to when the given submenu item is clicked.  -->

<!-- Products sub-menu, shown as needed  -->
<div onmouseout="HideItem('products_submenu');" onmouseover="ShowItem('products_submenu');" id="products_submenu" class="submenu" style="visibility: hidden;">
  <div class="submenubox">
    <ul>
      <li><a class="submenlink" href="placeholder.html">Flying Cars</a></li>
      <li><a class="submenlink" href="placeholder.html">Super Squirters</a></li>
      <li><a class="submenlink" href="placeholder.html">Sling Shots</a></li>
      <li><a class="submenlink" href="placeholder.html">Bamboozlers</a></li>
      <li><a class="submenlink" href="placeholder.html">Kazoos</a></li>
    </ul>
  </div>

</div>

<!-- Services sub-menu, shown as needed  -->
<div onmouseout="HideItem('services_submenu');" onmouseover="ShowItem('services_submenu');" id="services_submenu" class="submenu">
  <div class="submenubox">
    <ul>
      <li><a class="submenlink" href="placeholder.html">Toy Design</a></li>
      <li><a class="submenlink" href="placeholder.html">Market Research</a></li>
      <li><a class="submenlink" href="placeholder.html">IP Consulting</a></li>
      <li><a class="submenlink" href="placeholder.html">Licensing</a></li>
  </ul></div>
</div>

<!-- Fun Stuff sub-menu, shown as needed  -->
<div onmouseout="HideItem('funstuff_submenu');" onmouseover="ShowItem('funstuff_submenu');" id="funstuff_submenu" class="submenu" style="visibility: hidden;">
  <div class="submenubox">
    <ul>
      <li><a class="submenlink" href="placeholder.html">Toys We Designed</a></li>
      <li><a class="submenlink" href="placeholder.html">Press Ravings</a></li>
      <li><a class="submenlink" href="placeholder.html">Our Blog</a></li>
    </ul>
  </div>
</div>

<!-- About Us sub-menu, shown as needed  -->
<div onmouseout="HideItem('aboutus_submenu');" onmouseover="ShowItem('aboutus_submenu');" id="aboutus_submenu" class="submenu" style="visibility: hidden;">
  <div class="submenubox">
    <ul>
      <li><a class="submenlink" href="placeholder.html">Team</a></li>
      <li><a class="submenlink" href="placeholder.html">Investors</a></li>
      <li><a class="submenlink" href="placeholder.html">Partners</a></li>
      <li><a class="submenlink" href="placeholder.html">Careers</a></li>
      <li><a class="submenlink" href="placeholder.html">Our Blog</a></li>
     </ul>
  </div>
</div>

<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed  -->
<div onmouseout="HideItem('contact_submenu');" onmouseover="ShowItem('contact_submenu');" id="contact_submenu" class="submenu" style="visibility: hidden;">
  <div class="submenubox">
    <ul>
      <li><a class="submenlink" href="placeholder.html">Contact</a></li>
       <li><a class="submenlink" href="placeholder.html">Getting Here</a></li>
   </ul>
  </div>
</div><!-- end of sub-meus -->

</div>

<div><select  style="margin-left: 200px; position: relative; z-index: 0;">
                <option value=""></option>
                <option value="28">Test</option>
                <option value="Eff2">Test</option>
                <option value="Effort1">Test</option>
                <option value="FC">Test</option>
                <option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option>

            </select>
            </div>

Answer 1

The <select> element is an interactive content element in HTML5 and a menu in HTML4.01. As such it is an object which requires user input and behaves like a right click context menu and is rendered above all document elements if active. Try it for yourself - open your contextmenu and hover over the navigation.

This bug is connected to the behavior of other interactive content elements such as video (see also HTML5 rendering ).

The only way to prevent such behavior is to change the display property of an active select to none while hovering an interactive element. visibility:hidden; won't help since the options are still shown, and using display:none; on options will results in rendering errors.

Here is a small demonstration of the technique described above:

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

Answer 2

its very simple

$('IdOfMenu').on('mouseenter', function() {
 $("IdOfDropDown").blur();
});

Answer 3

for those who have the same problem it is very easy, add the code below under your code's Menu, this worked for all the navigators.

<input id="HideMenusTxt" name="HideMenusTxt" type="text" value="0"  style="width:0;height:0;position:absolute;z-index:-1"/>

<script type="text/javascript">
//menuId= The Id of the div menu
$('#menuId').on('mouseenter', function() {
    //in case we have opened select dropdown options, on mouseenter of the menu we set focus to "HideMenusTxt".
    $('#HideMenusTxt').focus();
});

Answer 4

Other solution, check if there is a select in the form and focus to the first element in the form instead of creating a hidden field.

        $('#menuId').mouseover(function () {
            //in case we have opened select dropdown options, on mouseover of the menu we set focus to the first element in the form.
            var firstSelectElement = $('form:first select:first');
            if (firstSelectElement.length > 0) {
                $('form:first *:input[type!=hidden]:first').focus();
            }

        });

Answer 5

Using display: none causes the dropdown to lose it's focus, if it has - at least in Chrome, not so in Firefox. This can cause trouble, if some content shall be displayed instead of the <select> when the dropdown is used (replace options by some custom HTML).

Using position: relative; z-index: -1 position: relative; z-index: -1 may also cause trouble: As it makes the <select> disappear behind the default layer, it may become impossible to click the dropdown. Further, the "focus" event may be fired after the options have been rendered, so changing the z-index via JavaScript may not work as intended.

I came up with the solution to shift the dropdown out of view on "focus" and shift it back on "blur":

position: relative; left: -9999px;

Compared to display: none , this solution also keeps the layout intact (except that the dropdown disappears), as the dropdown may define the height of its parent block element.

Answer 6

As Zeta said, the select box is an interactive element, you can't display anything above it using HTML/CSS, so the only option is to hide it when showing your menu, or simply to blur any focus ed selects on the page.

If you don't want to add any additional css classes though, you could simply blur() either at the start of your ShowItem function:

...
    function ShowItem (itemID) {

      //jQuery version
      $('select:focus').blur();

      //OR non-jQuery:
      document.activeElement.blur();
      //note this will blur any focused element, so you might want to check
      //if document.activeElement.tagName == 'SELECT' first, or other conditions

      var x = document.getElementById(itemID);
    ...

...or more generically (for other readers not in your specific situation) in a hover or mouseenter event callback on the menu items that trigger the submenus appearance.

Answer 7

Set your z-index to -1 for it to appear on the bottom. So on your select element you have an inline style defining the z-index to 1. Change it to negative 1.

<select  style="margin-left: 200px; position: relative; z-index: -1;">

I tried this in IE8 and it worked. The select drop-down was behind the menu options.