HTML选择下拉选项Z索引

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

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

我试着用位置给出z指数。但一切都不起作用。我认为这不是一个问题，但同样需要解释。如有任何建议，将不胜感激

这是示例代码：

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

/*本月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月月日日日日日日日日日日日日日日日日日日月月月月月月月月月月月月月月月月月月月月月月月月月月月日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日##*/
mynavbar先生{
位置：相对位置；
宽度：100%；
高度：23px；/*对应于下面a.navbartitle的“线高度”*/
边距：0；边框：0；填充：0；
背景色：#666633；
}
a、 纳夫巴蒂特尔{
显示：块；
浮动：左；
颜色：白色；
背景色：#666633；
字体系列：Verdana、Arial、Geneva、Helvetica、sans serif；
字体大小：12px；
字体大小：粗体；
边距：0；边框：0；填充：0；
线条高度：23px；/*对应于下面子菜单的“顶部”值*/
文本对齐：居中；
文字装饰：无；
}
a、 导航字幕：悬停{
背景色：#447755；
}
/*菜单标题宽度*/
#t1{宽度：104px；}
#t2{宽度：100px；}
#t3{宽度：102px；}
#t4{宽度：102px；}
#t5{宽度：180px；}
/*我们只是为每个菜单标题指定一个固定的宽度。然后，我们在下面指定
对应子菜单（如#产品#子菜单等）的固定左侧位置
使用这些固定值并不像只让每个
菜单标题确定菜单标题的宽度和子菜单的位置，
但我们发现，这种硬连接的方法减少了跨浏览器/跨操作系统
格式问题——而且很容易调整这些标题宽度和
下面对应的子菜单“左”位置，只要随时盯着它们就可以了
我们需要更改导航栏菜单标题（这并不常见）*/
.子菜单{
位置：绝对位置；
z指数：2；
顶部：23px；/*对应于上面a.navbartitle的线高度*/
填充：0；边距：0；
宽度：166px；/*如果调整此值，则也调整a下方的.子菜单的宽度*/
颜色：白色；
背景色：#666633；
边框：整个子菜单周围的1px实心#447755；/*框*/
字体系列：Verdana、Arial、Geneva、Helvetica、sans serif；
字体大小：11px；
}
/*修复IE格式的怪癖*/
*html.submenu{width:148px；}/*IE需要比上面的.submenu宽度更窄*/
/*结束*/
/*每个子菜单的位置*/
/*我们只需观察每个子菜单的位置，就可以根据需要向左或向右移动。
如果您调整菜单标题文本，您可能也要调整它们*/
#产品子菜单{左：0px；可见性：隐藏；}
#服务子菜单{左：104px；可见性：隐藏；}
#funstuff_子菜单{左：204px；可见性：隐藏；}
#aboutus_子菜单{左：306px；可见性：隐藏；}
#联系人_子菜单{左：408px；可见性：隐藏；}
/*注意，每个子菜单在页面加载时都是隐藏的，然后在
鼠标移到菜单标题上。改为使用“可见性”属性
使用“display”属性避免了Safari某些版本中的错误。
（这个bug非常深奥：浏览器忽略了“hover”属性
在显示属性设置为“无”的对象内的“li”对象上
加载页面时…），使用“可见性”属性而不是“显示”
通常会在页面上占用额外的空间，但在这里可以通过放置
第二层上的子菜单：请参见“位置：绝对”和“z索引：2”
在.子菜单定义中，位于此页面的更高位置*/
.子菜单a
{
显示：块；
颜色：#eee；
背景色：#666633；
宽度：146px；/*这应该是上面的子菜单的宽度减去下一行的右侧填充*/
填充：5px0px 4px20px；
文字装饰：无；
背景色：#666633；
边框底部：#447755点1px；
边框顶部：0；边框左侧：0；边框右侧：0；
}
ul{位置：相对；显示：块；}
li{位置：相对；显示：块；}
.子菜单框{
边距：0；填充：0；边框：0；
}
.子菜单框
{
边距：0；填充：0；边框：0；
列表样式类型：无；
}
.子框ul li{
边距：0；填充：0；边框：0；
}
.子菜单框ul li a:链接{}
.子菜单ul li a：已访问{}
.子菜单框ul li a：悬停
{
颜色：#c6e8e2；/*子菜单项的文本颜色*/
背景色：#447755；
边框底部：#447755点1px；
}
//用于显示和隐藏下拉菜单的JavaScript函数。
//在SimpleNavBar.html中，每次鼠标经过时，我们都会调用ShowMenuDiv
//菜单标题或子菜单本身，并在
//鼠标离开菜单标题或子菜单iteslf（onMouseOut）。
函数ShowItem（itemID）{
var x=document.getElementById（itemID）；
if（x）
x、 style.visibility=“可见”；
返回true；
}
函数HideItem（itemID）{
var x=document.getElementById（itemID）；
if（x）
x、 style.visibility=“隐藏”；
返回true；
}
//如SimpleNavBarStyles.css文件中所述，使用x.style.visibility作为
//如下图所示，跨浏览器支持似乎比使用
//x.style.display=“block”和x.style.display=“none”显示和隐藏
//菜单。





























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

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

<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();
});

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

        });

position: relative; left: -9999px;

...
    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);
    ...
$('IdOfMenu').on('mouseenter', function() {
 $("IdOfDropDown").blur();
});