jQuery error not visible when migrating code

Question

Well, I have on the following page

http://www.hotplateprensas.com.br/estilos/aa2.php

The functional script

When I migrate to the end of the page:

http://www.hotplateprensas.com.br/estilos/index.php

Then the following errors occur:

1 ) I can no longer click on li’s

2 ) No longer appears the effect of inter (little hand) when passing the mouse over the li’s

I’ve tried everything but I’m not getting it.

And there’s something else:

http://www.hotplateprensas.com.br/estilos/aa2.php

Does not work in the chrome, only in firefox

Here is the code of Aa2.php

<script type="text/javascript" src="_js/jquery.js"></script>

CSS

@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
body {
    margin: 0 auto;
    width: 800px;
}
.selectOptions select {
    display: none;
}
.selectOptions .selectOption:after {
    position: absolute;
    content: "";
    display: block;
    top: 1px;
    right: 1px;
    width: 33px;
    height: 33px;
    background-image: url(_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaBaixo:after {
    background-image: url(_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaCima:after {
    background-image: url(_imgs/setaCima.jpg);
}
.selectOptions .selectOption, ul {
    position: relative;
    width: 200px;
    height: 35px;
    background-color: rgba(0,0,0,0.2);
}
.selectOptions ul {
    overflow: hidden;
    list-style: none;
    z-index: -1;
}
.selectOptions ul li {
    width: 100%;
    height: 31px;
    line-height: 31px;
    cursor: pointer;
    padding: 2px;
    color: rgb(255,255,255);
    background-color: rgb(240,240,240);
    border-bottom: rgba(0,0,0,.1) 1px solid;
}
.selectOptions ul li:hover {
    color: rgb(255,255,255);
    background-color: rgba(0,0,0, .1);
}
.selectOptions ul li:hover + .selectOption:after {
    color: rgba(0,0,0, .1);
    background-color: rgb(255,255,255);
}

HTML

<div class="selectOptions">
  <select name="select" required>
    <option value="1">um</option>
    <option value="2">dois</option>
    <option value="3">Tres</option>
  </select>
  <div class="selectOption">
    <ul>
    </ul>
  </div>
</div>

jQuery

$(document).ready(function(e) {

  $(".selectOptions select").css("display", "none");

  contador = 0;

  $(".selectOptions .selectOption").click( function() {

      if(contador % 2 == 0) {
          $(".selectOptions ul").css("overflow", "visible") ;
          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
      } else {
           $(".selectOptions ul").css("overflow", "hidden");         
          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
      }

      $('.selectOptions .selectOption ul li').click(function(){ 
      alert();    
           $($(this).closest('ul')).prepend($(this)); 

           $(".selectOptions select option").filter(function() {
              return $(this).val() == $('.selectOptions .selectOption ul li').val();
           }).prop("selected", true);

      })

      contador++;
  }); 


  $(".selectOptions select > option").each(function() {
      $(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
  });

});

One thing I noticed is that in index.php, when you get here:

$('.selectOptions .selectOption ul li').click(function(){ 
  alert();    

Does not enter the function, can put a Alert on the first line that doesn’t alert. You can leave it alone Alert within the function that nothing happens.

This for both browsers, Chrome and firefox.

However, for the file Aa2.php, the error only occurs for the Chrome.

But another thing I noticed is that in css, cursor:Pointer is not working for the page index php. in the 2 browsers already on the page Aa2.php the cursor works.

Answer 1

In the above print, when I step the pointer to select elements over the menu, it selects the body (in blue) instead of selecting the menu.

Your problem is in the z-index below negative, which is playing the <ul> behind the body:

.selectOptions ul {
    overflow: hidden;
    list-style: none;
    z-index: -1;
}

Delete the line z-index: -1; which will work on Chrome as well.