HTML 选择下拉选项 Z-index

Question

当我要选择一个选项时，我有一个简单的选择下拉菜单导航项，所以现在当我将鼠标悬停在菜单项上时，导航将返回到打开的选择选项列表。它发生在所有浏览器中。不知道是bug还是什么。步骤是：

• 打开选择下拉选项
• 同时将鼠标悬停在导航菜单项上
• 现在导航项在选项列表后面（而不是在选择标签后面）

我尝试为 z-index 提供位置。但没有任何工作。我认为这不是问题，但需要解释。任何建议将不胜感激。

这是示例代码：

    <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

很简单

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

Answer 2

正如 Zeta 所说，选择框是一个交互式元素，您无法使用 HTML/CSS 在其上方显示任何内容，因此唯一的选择是在显示菜单时将其隐藏，或者只是 blur any @987654322 @ed 在页面上选择。

如果您不想添加任何额外的 css 类，您可以在 ShowItem 函数的开头简单地 blur()：

... 功能 ShowItem (itemID) { //jQuery版本 $('select:focus').blur(); //或非jQuery： 文档.activeElement.blur(); //注意这会模糊任何焦点元素，所以你可能想检查一下 //if document.activeElement.tagName == 'SELECT' first, 或者其他条件 var x = document.getElementById(itemID); ...

...或更笼统地说（对于不属于您特定情况的其他读者）在触发子菜单出现的菜单项上的 hover 或 mouseenter 事件回调中。

Answer 3

使用display: none 会导致下拉菜单失去焦点（如果有） - 至少在 Chrome 中是这样，在 Firefox 中则不然。如果在使用下拉菜单时应显示某些内容而不是 <select>（将选项替换为某些自定义 HTML），这可能会导致麻烦。

使用position: relative; z-index: -1 也可能会引起麻烦：由于它使<select> 消失在默认图层后面，因此可能无法单击下拉菜单。此外，“focus”事件可能会在选项呈现后触发，因此通过 JavaScript 更改 z-index 可能无法按预期工作。

我想出了将下拉菜单移出“焦点”并将其移回“模糊”的解决方案：

position: relative; left: -9999px;

与display: none相比，此解决方案还保持布局不变（除了下拉菜单消失），因为下拉菜单可以定义其父块元素的高度。

Answer 4

<select> 元素在 HTML5 中是 interactive content 元素，在 HTML4.01 中是 menu。因此，它是一个需要用户输入的对象，其行为类似于右键单击上下文菜单，如果处于活动状态，则呈现在所有文档元素之上。亲自尝试一下 - 打开上下文菜单并将鼠标悬停在导航上。

此错误与其他交互式内容元素的行为有关，例如 video（另请参阅 HTML5 rendering）。

防止这种行为的唯一方法是在悬停交互式元素时将活动选择的显示属性更改为none。 visibility:hidden; 无济于事，因为选项仍然显示，并且在选项上使用 display:none; 会导致呈现错误。

Here is a small demonstration的上述技术：

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

Answer 5

其他解决方案，检查表单中是否有选择，并关注表单中的第一个元素，而不是创建隐藏字段。

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

对于那些有同样问题的人来说，这很容易，在你的代码菜单下添加下面的代码，这对所有导航器都有效。

<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 7

将 z-index 设置为 -1 以使其显示在底部。因此，在您的选择元素上，您有一个将 z-index 定义为 1 的内联样式。将其更改为负 1。

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

我在 IE8 中尝试过，它成功了。选择下拉菜单位于菜单选项后面。