HTML Select Drop Down Option Z-index

HTML Select Drop Down Option 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:

• Open select dropdown options
• Same time hover on navigation menu items
• Now the navigation items are going behind the option list (not behind the select tag)

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.

This is the sample code:

        
    ProductsServicesFun StuffAbout UsContacts & Directions            
    
      
        
Flying Cars
        
Super Squirters
        
Sling Shots
        
Bamboozlers
        
Kazoos
      
    
    
      
    
      
        
Toy Design
        
Market Research
        
IP Consulting
        
Licensing
    
  
      
    
      
        
Toys We Designed
        
Press Ravings
        
Our Blog
      
    
  
      
    
      
        
Team
        
Investors
        
Partners
        
Careers
        
Our Blog
       
    
  
      
    
      
        
Contact
         
Getting Here
     
    
  
    
    
                                    Test                  Test                  Test                  Test                  TestTestTestTest                              
  

Answer by thepriebe for HTML Select Drop Down Option Z-index

Set your z-index to -1 for it to appear on the bottom. So on your select element you have an inline style defining the z-index to 1. Change it to negative 1.

      
I tried this in IE8 and it worked. The select drop-down was behind the menu options.
  
Answer by Zeta for HTML Select Drop Down Option Z-index
The  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.
    
This bug is connected to the behavior of other interactive content elements such as video (see also HTML5 rendering).
    
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.
    
Here is a small demonstration of the technique described above:
        
.mynavbar:hover ~ * .selecthack > select:focus  .mynavbar:hover ~ .selecthack > select:focus{      display:none;      }  
  
Answer by user4391566 for HTML Select Drop Down Option Z-index
for those who have the same problem it is very easy, add the code below under your code's Menu, this worked for all the navigators.