mouseover and mouseout events firing on children

Use the mouseenter and mouseleave events instead new in Prototype 1.6.1 (but not new in IE). You have to move your inline event handlers out of your markup to do this:

<div id="Navigation">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

And setup the events in script:

<script>
document.observe('dom:loaded', function() {
    $('Navigation')
        .observe('mouseenter', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
        .observe('mouseleave', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
})
</script>

Unlike mouseover and mouseout, these events do not bubble from child elements. They are fired on the exact element you bind them to, solving your issue nicely.

As an alternate, generic (not Prototype-specific) answer

This is caused by Event Bubbling. More info, including how to cancel it in child nodes, here: http://www.quirksmode.org/js/events_order.html