title: Weird behavior in Chrome with HTML select
body: <p>I have a CSS menu pretty simple, that's show an list UL on hover. From a time ago, in Chrome, when I select an option that is on the same position as the menu that's hidden by <code>display: none</code>, I get the menu hovered. </p>
  
  <p>How a select option can hover a hidden object on click? This only happens on Chrome.</p>
  
  <p>I tried to change select z-index to a higher.
  Changed z-index for menu to -1 until parent ul get hovered, but no success, still get the issue</p>
  
  <p><a href="http://jsfiddle.net/Vgrxt/" rel="nofollow noreferrer">Here</a> is a code </p>
  
  <p>Try select the option test5:</p>
  
  <pre><code>ul.menu ul {
      display: none !important;
  }
  
  ul.menu li:hover&gt;ul {
      display: block !important;
  }
  
  ul.menu ul {
      position: absolute;
      left: -1px;
      top: 98%;
  }
  
  ul.menu ul ul {
      position: absolute;
      left: 98%;
      top: -2px;
  }
  
  ul.menu, ul.menu ul {
      margin: 0;
      list-style: none;
      padding: 2px;
  }
  
  ul.menu li ul.links {
      margin: 0;
      list-style: none;
      padding: 0;
      border-color: #AAAAAA;
      border-width: 1px;
      border-style: solid;
  }
  
  ul.menu ul.links li {
      margin: 0px;
      list-style: none;
      padding: 2px;
      background-color: #F5F5F5;
      background-repeat: repeat;
  }
  
  ul.menu table {
      border-collapse: collapse;
  }
  
  ul.menu {
      display: block;
      float: left;
  }
  
  ul.menu ul {
      width: 160.65px;
  }
  
  ul.menu li {
      display: block;
      margin: 0;
      font-size: 0px;
      margin-right: 4px;
  }
  
  ul.menu a:active, ul.menu a:focus {
      outline-style: none;
  }
  
  ul.menu a, ul.menu li.dis a:hover, ul.menu li.sep a:hover {
      display: block;
      vertical-align: middle;
      border-width: 0px;
      border-color: #6655ff;
      border-style: solid;
      text-align: left;
      text-decoration: none;
      padding: 3px;
      font-family: Arial, Helvetica, Verdana;
      font-size: 11px;
      color: #000;
      text-decoration: none;
      cursor: default;
      border: 1px solid transparent;
  }
  
  ul.menu ul.links a {
      display: block;
      vertical-align: middle;
      background-color: #F5F5F5;
      border-width: 0px;
      border-color: #6655ff;
      border-style: solid;
      text-align: left;
      text-decoration: none;
      padding: 4px;
      font: normal 11px Verdana;
      color: black;
      text-decoration: none;
      cursor: default;
      border: 1px solid transparent;
  }
  
  ul.menu span {
      display: none;
      overflow: hidden;
  }
  
  ul.menu li {
      display: block;
      float: left;
  }
  
  ul.menu ul li {
      float: none;
  }
  
  ul.menu ul a {
      text-align: left;
      white-space: nowrap;
  }
  
  ul.menu li.sep {
      text-align: center;
      padding: 0px;
      line-height: 0;
      height: 100%;
  }
  
  ul.menu li.sep span {
      float: none;
      padding-right: 0;
      width: 5px;
      height: 16px;
      display: inline-block;
      background-color: #AAAAAA;
      background-image: none;
  }
  
  ul.menu ul li.sep span {
      width: 80%;
      height: 3px;
  }
  
  ul.menu li:hover {
      position: relative;
      z-index: 999999;
  }
  
  ul.menu li:hover&gt;a {
      text-decoration: none;
      border: 1px inset #CCCCCC;
      background: #E3E3E3;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
  }
  
  ul.menu li a:hover {
      position: relative;
      text-decoration: none;
      border: 1px inset #CCCCCC;
      background: #E3E3E3;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
  }
  
  ul.menu ul.links li:hover&gt;a {
      background: #F8FBFE;
      text-decoration: none;
      border-radius: 1px;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border: 1px solid #BAE3FE;
  }
  
  ul.menu ul.links li a:hover {
      background: #F8FBFE;
      position: relative;
      text-decoration: none;
      border-radius: 1px;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border: 1px solid #BAE3FE;
  }
  
  ul.menu li.dis a {
      color: #AAAAAA !important;
  }
  
  ul.menu img {
      border: none;
      float: left;
      _float: none;
      margin-right: 4px;
      width: 16px;
      height: 16px;
  }
  
  ul.menu ul img {
      width: 16px;
      height: 16px;
  }
  
  ul.menu img.over {
      display: none;
  }
  
  ul.menu li.dis a:hover img.over {
      display: none !important;
  }
  
  ul.menu li.dis a:hover img.def {
      display: inline !important;
  }
  
  ul.menu li:hover &gt; a img.def {
      display: none;
  }
  
  ul.menu li:hover &gt; a img.over {
      display: inline;
  }
  
  ul.menu a:hover img.over,ul.menu a:hover ul img.def,ul.menu a:hover a:hover ul img.def,ul.menu a:hover a:hover a:hover ul img.def,ul.menu a:hover a:hover img.over,ul.menu a:hover a:hover a:hover img.over,ul.menu a:hover a:hover a:hover a:hover img.over {
      display: inline;
  }
  
  ul.menu a:hover img.def,ul.menu a:hover ul img.over,ul.menu a:hover a:hover ul img.over,ul.menu a:hover a:hover a:hover ul img.over,ul.menu a:hover a:hover img.def,ul.menu a:hover a:hover a:hover img.def,ul.menu a:hover a:hover a:hover a:hover img.def {
      display: none;
  }
  
  ul.menu a:hover ul,ul.menu a:hover a:hover ul,ul.menu a:hover a:hover a:hover ul {
      display: block;
  }
  
  ul.menu a:hover ul ul,ul.menu a:hover a:hover ul ul {
      display: none;
  }
  
  ul.menu span {
      display: block;
      background-position: right center;
      background-repeat: no-repeat;
      padding: 0 2px 0;
  }
  
  ul.menu ul.links span {
      background-image: url(./images/arr_nav.gif);
  }
  
  ul.menu ul.links a:hover span,ul.menu table a:hover a:hover span,ul.menu table a:hover a:hover a:hover span {
      background-image: url(./images/arr_nav.gif);
  }
  
  /* DHTML WINDOW */
  .dhtmlwindow {
      position: absolute;
      border: 1px solid rgb(153, 153, 153);
      #border-color: rgb(142, 153, 186);
      #border-color: rgba(142, 153, 186, 0.3);
      visibility: hidden;
      background-color: #fff;
  }
  </code></pre>