Selección de HTML Opción desplegable Z-index

Question

Tengo un menú desplegable de selección simple cuando voy a seleccionar una opción Hay un elemento de navegación de menú, por lo que ahora cuando voy a desplazarme sobre los elementos del menú, la navegación vuelve a seleccionar la opción lista que está abierta. Está sucediendo en todos los navegadores. No sé si es un error o qué. Los pasos son:

• abierto seleccionar opciones desplegables
• vuelo estacionario misma hora en los elementos del menú de navegación
• Ahora los elementos de navegación van detrás de la lista de opciones (no detrás de la etiqueta de selección)

I he intentado dar z-index con posiciones. Pero nada está funcionando. Creo que no es un problema, pero necesito una explicación sobre el mismo. Cualquier sugerencia será muy apreciada.

Este es el código de ejemplo:

<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

Fije su índice z a -1 para que aparezca en la parte inferior. Así que en su elemento de selección tiene un estilo en línea que define el índice z de 1. Cambiar a negativo 1.

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

He intentado esto en IE8 y funcionó. El menú desplegable de selección estaba detrás de las opciones del menú.

Answer 2

El elemento <select> es un elemento interactive content en HTML5 y menu en HTML4.01. Como tal, es un objeto que requiere la entrada del usuario y se comporta como un menú contextual de clic derecho y se representa sobre todos los elementos del documento si está activo. Pruébelo usted mismo: abra su menú contextual y desplace el cursor sobre la navegación.

Este bug está conectado con el comportamiento de otros elementos de contenido interactivo, tales como video (véase también HTML5 rendering).

La única manera de evitar este comportamiento es cambiar la propiedad de visualización de una selección activa a none mientras se desplaza un elemento interactivo. visibility:hidden; no ayudará ya que las opciones todavía se muestran, y usar display:none; en las opciones dará como resultado errores de representación.

Here is a small demonstration de la técnica descrita anteriormente:

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

Answer 3

para aquellos que tienen el mismo problema, es muy fácil, agregue el código a continuación en el menú de su código, esto funcionó para todos los navegantes.

<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

Otra solución, comprueba si hay una selección en la forma y foco al primer elemento en forma en lugar de crear un campo oculto.

 $('#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

Usando display: none hace que el menú desplegable para perder su enfoque, si se tiene - al menos en Chrome, no así en Firefox. Esto puede causar problemas, si se muestra algún contenido en lugar del <select> cuando se usa el menú desplegable (reemplace las opciones por algún HTML personalizado).

El uso de position: relative; z-index: -1 también puede causar problemas: Como hace que el <select> desaparezca detrás de la capa predeterminada, puede ser imposible hacer clic en el menú desplegable. Además, el evento de "enfoque" puede dispararse después de que se hayan procesado las opciones, por lo que cambiar el índice z a través de JavaScript puede no funcionar como se esperaba.

me ocurrió la solución para cambiar el menú desplegable fuera de la vista de "enfoque" y cambiar de nuevo en "desenfoque":

position: relative; left: -9999px; 

En comparación con display: none, esta solución también se mantiene el diseño intacta (excepto que el menú desplegable desaparece), ya que el menú desplegable puede definir la altura de su elemento de bloque primario.

Answer 6

Como dijo Zeta, el cuadro de selección es un elemento interactivo, no se puede mostrar nada encima utilizando HTML/CSS, por lo que la única opción es ocultarlo al mostrar el menú o simplemente blur seleccionar focus ed en la pagina. No

 
    ... 
    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); 
    ... 

... o más genéricamente (para otros lectores en:

Si no desea añadir ningún clases CSS adicionales sin embargo, usted podría simplemente blur() ya sea en el inicio de su función ShowItem su situación específica) en una devolución de llamada por evento hover o mouseenter en los elementos del menú que activan la apariencia de los submenús.

Answer 7

su muy simple

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