@caramu

先ほど書いたやつだと、エリア外が閉じないので、こっちで対処

http://stackoverflow.com/questions/19001183/mouseover-and-mouseout-in-accordion
http://jsfiddle.net/arunpjohny/jBFMv/

<ul id="accordion">
    <li>
        <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
jQuery(function ($) {
    $('#accordion li').hover(function () {
        $(this).find('ul').stop(true, true).slideToggle()
    }).find('ul').hide()
})
</script>