Do not call the form by clicking the submenu

I have the following menu with submenu:

<nav class="menu">
  <ul class="menu-list">
        <li><a href="#">Produtos de Higiene</a>
                <ul class="sub-menu">
                    <li><a id="mudar_produto" href="#produto_1">Novo</a></li>
                    <li><a href="#produto_2">Entrada</a></li>
                </ul>
       </li>
  </ul>
</nav>

Then I have the form:

<section class="hide-section" id="produto_1"> 
<form class="form-validate" id="feedback_form">
    <div class="campo">
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        </div>
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong> 
            <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong> 
            <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
        </div>
        </fieldset>
        <button class="btn btn-success btn_contact" type="button">Registo</button>
        <div id="success_messages" class="hide">sucessso</div>
        <div id="error_message" class="hide">erro</div>
</form>

</section> 

Now I have this script to call the form and change form:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".hide-section:not(:first)").hide();
    $('#mudar_produto').change(function(){
        $('.hide-section').hide();
        $($(this).val()).show();
    });
    $('#first_dd').change(function(){ 
        var id = $('#first_dd option:selected').val(); 
        $.each($('#second_dd option'),function(){ 
            if($(this).attr('data-id')==id){ 
                $(this).attr('selected',true); 
            }
        }); 
    });
});
</script>

I will show in this image how the result is:

Cananyonehelpwithcallingtheform?Thelinkchangestohref="# product_1" but does not show the form CSS:

* {
    margin: 0;
    padding: 0;
}

fieldset {
    border: 0;
}

body, input, select, textarea, button {
    font-family: sans-serif;
    font-size: 1em;
}

.grupo:before, .grupo:after {
    content: " ";
    display: table;
}

.grupo:after {
    clear: both;
}

.campo {
    margin-bottom: 1em;
}

.campo label {
    margin-bottom: 0.2em;
    color: #666;
    display: block;
}

fieldset.grupo .campo {
    float:  left;
    margin-right: 1em;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="tel"],
.campo select,
.campo textarea {
    padding: 0.2em;
    border: 1px solid #CCC;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    display: block;
}

.campo select option {
    padding-right: 1em;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    background: #FFC;
}

.campo label.checkbox {
    color: #000;
    display: inline-block;
    margin-right: 1em;
}

.botao {
    font-size: 1.5em;
    background: #5ca2df;
    border: 0;
    margin-bottom: 1em;
    color: #FFF;
    padding: 0.2em 0.6em;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.botao:hover {
    background: #5ca2df;
    box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
    text-shadow: none;
}

.botao, select, label.checkbox {
    cursor: pointer;
}
.hide {
     display: none;
}