How do I display the areas of each category?

Question

Good evening guys, I’m in need of a little help I wound up here in PHP, is the following, I created two tables category and area, each category has several areas, each area can only have one category, the relationship I managed to do, the problem is time to display, I wanted to show off like this:

Categoria1
   Area_dela
   Outra_area_dela...

Categoria2
   Area_dela
   Outra_area_dela...

And my loop ended up like this, I tried everything and the most I could show with the relationship was like this:

Category In General has two areas, announcements and updates, category Other also... I couldn’t get the code in here, I was cutting half of it

Code: http://pastebin.com/JVm0pHsC

<?php
include("inc/header.php");
$sqlCategorias = mysqli_query($conexao, "SELECT nomeCategoria, nomeArea FROM categoria INNER JOIN area ON categoria.idCategoria = area.idCategoria");

?>

<div class="container">
    <section class="categorias col-md-9">

        <?php
            while($row = mysqli_fetch_array($sqlCategorias)):
                $nomeCategoria = $row['nomeCategoria'];
                $nomeArea = utf8_encode($row['nomeArea']);

        ?>
        <article>
            <h2><?php echo $nomeCategoria; ?></h2>
            <ul>
                <li><a href="#"><?php echo $nomeArea;?></a></li>
            </ul>
        </article>
        <?php  
            endwhile;
        ?>
    </section>
    <aside class="widgets col-md-3">
        widgets
    </aside>
</div>


<?php
include("inc/footer.php");
?>