HTML选择下拉选项Z-index [英] HTML Select Drop Down Option Z-index
本文介绍了HTML选择下拉选项Z-index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的选择下拉，当我要选择一个选项有菜单导航项，所以现在当我要悬停在菜单项导航回到选择打开的选项列表。它发生在所有浏览器。我不知道这是一个错误或什么。步骤是：
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:
- 打开选择下拉菜单选项
- 同时将鼠标悬停在导航菜单项上
- 现在导航项目在选项列表后面（不在选择标签之后）
试图给z-index的位置。但没有什么是工作。我认为它不是一个问题，但需要解释相同。任何建议都将非常感激。
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.
这是示例代码：
<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 & 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>
推荐答案
< select& code> 元素是互动内容元素和菜单在HTML4.01。因此，它是需要用户输入的对象，其行为类似于右键上下文菜单，并且在活动时被呈现在所有文档元素上方。
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.
此错误是连接到其他互动内容元素的行为，例如 video （另请参阅 HTML5渲染）。
This bug is connected to the behavior of other interactive content elements such as video (see also HTML5 rendering).
防止此类行为的唯一方法是更改活动选择到 none ，同时悬停互动元素。 visibility：hidden; 将不会帮助，因为选项仍然显示，并使用 display：none; 会导致渲染错误。
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.
.mynavbar:hover ~ * .selecthack > select:focus
.mynavbar:hover ~ .selecthack > select:focus{
display:none;
}
这篇关于HTML选择下拉选项Z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
