href only works last box

Question

I’m trying to make a simple accordion, each one will hold some x of links coming from the bank, but when I put the mouse on top of the links of the accordion simply has no action (the pointer nor even changes), only work those of the last accordion

    $('.open-temp').click(function(){
		var contentEp = $(this).parent().find('.content-temp');
			if(!contentEp.hasClass('show')){
			$('.caixa').find('.show').slideUp('fast', function(){
				$(this).addClass('hide').removeClass('show');
			});
			contentEp.slideDown('fast', function(){
				$(this).addClass('show').removeClass('hide');
			});
		}
	});

    div, span {
	  position: relative;
	  display: block;
	  width: 100%;
    }

    .overflow {overflow: hidden;}

    ul {
	  height: 100%;
    }

    ul, li {
	  float: left;
	  position: relative;
      width: 100%;
    }

    li, a {
	  display: flex;
	  align-items: center;
    }

    li {list-style: none;}

    a {
	  justify-content: center;
	  text-decoration: none;
	  width: 100%;
    }

    /*Sanfona*/
    .show {display: block;}

    .hide {display: none;}

    .temp {width: 49.33333333333333%;/*444*/}

    .temp h2, .caixa span {
	  height: 40px;
	  color: #777;
	  background-color: #ebebeb;
    }

    .box-temp {
	  float: left;
	  overflow: hidden;
    }

    .caixa span {
	  font-size: 15px;
	  border-top: 1px solid #e1e1e1;
	  cursor: pointer;
    }

    .content-temp {
	  float: left;
	  background-color: #f1f1f1;
    }

    .content-temp ul {
	  padding: 5px 5px;
	  background-color: green
     }

     .content-temp li {
	   margin: 0 0 5px 0 !important;
	   height: 25px;
     }

     .content-temp a {
	   height: 100%;
	   background-color: #ccc;
	   text-transform: uppercase;
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="temp overflow">
	   <h2>Selecione</h2>

		<div class="box-temp overflow">

			<?php for ($i=0; $i < 3; $i++) :?>

			<div class="caixa">
				<span class="open-temp"> Esportes</span>
				<div class="content-temp hide">
					<ul>
						<li><a href="">teste 1</a></li>
						<li><a href="">teste 2</a></li>
						<li><a href="">teste 3</a></li>
					</ul>
				</div>
			</div>

			<?php endfor;?>
		</div>
	</div>

Answer 1

Your problem basically is that you are using a lot of unnecessary properties like position:relative, overflow:hidden and float

Everything that doesn’t need I left commented, and at UL I added some more properties to get more aligned.

$('.open-temp').click(function () {
  var contentEp = $(this).parent().find('.content-temp');
  if (!contentEp.hasClass('show')) {
    $('.caixa').find('.show').slideUp('fast', function () {
      $(this).addClass('hide').removeClass('show');
    });
    contentEp.slideDown('fast', function () {
      $(this).addClass('show').removeClass('hide');
    });
  }
});

div,
span {
  /* position: relative; */
  display: block;
  width: 100%;
}

/* .overflow {overflow: hidden;} */

ul {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 15px 5px;
}

ul,
li {
  /* float: left; */
  position: relative;
  width: 100%;
}

li,
a {
  display: flex;
  align-items: center;
}

li {
  list-style: none;
}

a {
  justify-content: center;
  text-decoration: none;
  width: 100%;
}

/*Sanfona*/
.show {
  display: block;
}

.hide {
  display: none;
}

.temp {
  width: 49.33333333333333%;
  /*444*/
}

.temp h2,
.caixa span {
  height: 40px;
  color: #777;
  background-color: #ebebeb;
}

.box-temp {
  /* float: left; */
  /* overflow: hidden; */
}

.caixa span {
  font-size: 15px;
  border-top: 1px solid #e1e1e1;
  cursor: pointer;
}

.content-temp {
  /* float: left; */
  background-color: #f1f1f1;
}

.content-temp ul {
  background-color: green
}

.content-temp li {
  margin: 0 0 5px 0 !important;
  height: 25px;
}

.content-temp a {
  height: 100%;
  background-color: #ccc;
  text-transform: uppercase;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="temp overflow">
  <h2>Selecione</h2>

  <div class="box-temp overflow">

    <!-- <?php for ($i=0; $i < 3; $i++) :?> -->

    <div class="caixa">
      <span class="open-temp"> Esportes</span>
      <div class="content-temp hide">
        <ul>
          <li><a href="">teste 1</a></li>
          <li><a href="">teste 2</a></li>
          <li><a href="">teste 3</a></li>
        </ul>
      </div>
    </div>
    <div class="caixa">
      <span class="open-temp"> dois</span>
      <div class="content-temp hide">
        <ul>
          <li><a href="">teste 1</a></li>
          <li><a href="">teste 2</a></li>
          <li><a href="">teste 3</a></li>
        </ul>
      </div>
    </div>

    <!-- <?php endfor;?> -->
  </div>
</div>