JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id='navigation'>
    <a href='#' class='nav colecao'></a>
    <a href='#' class='nav slash'>/</a>
    <a href='#' class='nav livro'></a>
    <a href='#' class='nav slash'>/</a>
    <a href='#' class='nav frente'></a>
    <a href='#' class='nav slash'>/</a>
    <a href='#' class='nav capitulo'></a>
    <a href='#' class='nav slash'>/</a>
    <a href='#' class='nav tipoEx'></a>
  </div>

  <div id='selectEx'>
    <select id='Coleção' size='5'>
      <option>Matemática</option>
      <option>Física</option>
      <option>Química</option>
      <option>Biologia</option>
      <option>Português</option>
    </select>
    <select id='Livro' size='4' disabled>
      <option>Livro 1</option>
      <option>Livro 2</option>
      <option>Livro 3</option>
      <option>Livro 4</option>
    </select>
    <select id='Frente' size='3' disabled>
      <option>Frente 1</option>
      <option>Frente 2</option>
      <option>Frente 3</option>
    </select>
    <select id='#Capitulo' size='3' disabled>
      <option>Capitulo 1</option>
      <option>Capitulo 2</option>
      <option>Capitulo 3</option>
    </select>
    <select id='#TipoEx' size='3' disabled>
      <option>Revisando</option>
      <option>Propostos</option>
      <option>Complementares</option>
    </select>
  </div>
  <div id="Exercícios">
    <a href='#'>001</a>
    <a href='#'>002</a>
    <a href='#'>003</a>
    <a href='#'>004</a>
    <a href='#'>005</a>
    <a href='#'>006</a>
    <a href='#'>007</a>
    <a href='#'>008</a>
    <a href='#'>009</a>
    <a href='#'>010</a>
  </div>
</body>

CSS

select {
  height: 100%;
  margin: auto 5px;
  padding: 5px;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  outline: none;
}

select option:checked {
  box-shadow: 0 0 10px 100px #ddd inset;
}

#selectEx {
  display: flex;
  align-items: middle;
  justify-content: center;
}

#navigation {
  display: flex;
  align-items: middle;
  justify-content: center;
}

.nav {
  text-decoration: none;
}

.slash {
  opacity: 0;
  margin: auto 5px;
}

.active {
  opacity: 100;
}

.colecao {
  color: #c52525;
}

.livro {
  color: #eea737;
}

.frente {
  color: #008a44;
}

.capitulo {
  color: #999;
}

JavaScript

$(document).ready(function() {
  var colecao = livro = frente = capitulo = tipoEx = '';
  $(document).click(function() {
    console.log('Coleção: ' + colecao);
    console.log('Livro: ' + livro);
    console.log('Frente: ' + frente);
    console.log('Capítulo: ' + capitulo);
    console.log('TipoEx: ' + tipoEx);
  });
  $('#Exercícios').hide();
  $('#Coleção').click(function() {
    colecao = $(this).find(':selected').text();
    $('#navigation a.colecao').text(colecao);
    if (colecao != '') {
      $('#Livro').prop('disabled', false);
    }
  });
  $('#Livro').click(function() {
    livro = $(this).find(':selected').text();
    $('#navigation a.livro').text(livro);
    if (livro != '') {
      $('#navigation a:eq(1)').addClass('active');
      $('#Frente').prop('disabled', false);
    }
  });
  $('#Frente').click(function() {
    frente = $(this).find(':selected').text();
    $('#navigation a.frente').text(frente);
    if (frente != '') {
      $('#navigation a:eq(3)').addClass('active');
      $('#Capítulo').prop('disabled', false);
    }
  });
  $('#Capítulo').click(function() {
    capitulo = $(this).find(':selected').text();
    $('#navigation a.capitulo').text(capitulo);
    if (capitulo != '') {
      $('#navigation a:eq(3)').addClass('active');
      $('#tipoEx').prop('disabled', false);
    }
  });
  $('#TipoEx').click(function() {
    tipoEx = $(this).find(':selected').text();
    $('#navigation a.tipoEx').text(tipoEx);
    if (capitulo != '') {
      $('#Exercícios').show();
    }
  });
});