HTML Выберите Drop Down Option Z-index

Question

У меня есть простой выбор, когда я собираюсь выбрать вариант, есть пункт навигации по меню, так что теперь, когда я собираюсь навести курсор на пункты меню, навигация возвращается к выбору опции который открыт. Это происходит во всех браузерах. Я не знаю, это ошибка или что. Шаги:

• Открыть выберите выпадающие варианты
• же время парения по пунктам меню навигации
• Теперь навигационные элементы собираются за список опций (а не за выбором тега)

I попытались дать 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> 

Answer 1

Установите Z-индекс -1 для того, чтобы появиться на дне. Так что на вашем выбора элемента у вас есть встроенный стиль, определяющий Z-индекс к 1. Измените его к отрицательному 1.

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

Я попробовал это в IE8, и она работала. Выпадающее меню выбрано позади опций меню.

Answer 2

Элемент <select> является элементом interactive content в HTML5 и menu в HTML4.01. Таким образом, это объект, который требует ввода пользователем и ведет себя как контекстное меню правой кнопки мыши и отображается выше всех элементов документа, если он активен. Попробуйте сами - откройте контекстное меню и наведите указатель мыши на навигацию.

Эта ошибка связана с поведением других элементов интерактивного контента, таких как 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 3

для тех, у кого есть такая же проблема, это очень просто, добавьте код ниже в меню вашего кода, это работает для всех мореплавателей.

<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

Другое решение, проверьте, есть ли выбор в форме и фокус на первый элемент в форме вместо создания скрытого поля.

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

Использование display: none вызывает ниспадающее меню, чтобы потерять это внимание, если у него есть - по крайней мере, в Chrome, не так в Firefox. Это может вызвать проблемы, если какой-то контент будет отображаться вместо <select>, когда выпадающий список используется (замените параметры на некоторые пользовательские HTML).

Использование position: relative; z-index: -1 также может вызывать проблемы: поскольку <select> исчезает за слоем по умолчанию, может оказаться невозможным щелкнуть выпадающий список. Кроме того, событие «focus» может быть запущено после того, как параметры были отображены, поэтому изменение z-индекса с помощью JavaScript может не работать должным образом.

Я придумал решение перенести выпадающее меню из поля зрения на «фокусе» и перенести его на «размытости»:

position: relative; left: -9999px; 

По сравнению с display: none, этим решением также сохраняет расположение нетронутого (за исключением что выпадающее окно исчезает), поскольку выпадающее меню может определять высоту его родительского элемента блока.

Answer 6

Как указывает Зета, поле выбора является интерактивным элементом, вы не можете отображать что-либо над ним с помощью HTML/CSS, поэтому единственный вариант - скрыть его при отображении вашего меню или просто до blur любые focus ed selects на странице.

Если вы не хотите, чтобы добавить дополнительные классы CSS, хотя, вы могли бы просто blur() либо в начале вашей ShowItem функции:

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

... или более обобщенно (для других читателей не в ваша конкретная ситуация) в ответном вызове событий или mouseenter на элементы меню, которые вызывают появление подменю.

Answer 7

его очень просто

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