Simple jQuery Navigation Menu

<script type="text/javascript">

    $(function () {
        $('.MyNavHolder .SubSection').hide();
        $('.MyNavHolder .Section').hover(function () { $(this).find('.SubSection').toggle('fast'); });
    });

</script>

<style>
    .MyNavHolder {background-color: #f00; overflow:visible; height: 30px; padding: 0px; position: relative;  }
    .MyNavHolder .MyNav {  position: absolute; right: 0; }
    .MyNavHolder a { color: #fff; text-decoration: none; display: block; }
    .MyNavHolder ul { margin: 0; padding: 0; list-style-type: none;}
    .MyNavHolder .Section { float: left;  background-color: Olive; width: 200px; cursor: pointer; }
    .MyNavHolder .Section .Header { height: 30px; border-left: 1px solid black;  }
    .MyNavHolder .Section .Header div { padding: 5px;  }
    .MyNavHolder .SubSection li { background-color: Fuchsia; padding: 5px; }
    .MyNavHolder .SubSection li:hover { background-color: Blue; }
</style>

<div class="MyNavHolder">
    <ul class="MyNav">
        <li class="Section">
            <div class="Header">
                <div><a href="">About Us</a></div>
            </div>
            <ul class="SubSection">
                <li><a href="">Contact Us</a></li>
                <li><a href="">History</a></li>
            </ul>
        </li>
        <li class="Section">
            <div class="Header">
                <div><a href="">McCormack</a></div>
            </div>
            <ul class="SubSection">
                <li><a href="">Account Settings</a></li>
                <li><a href="">Log Out</a></li>
            </ul>
        </li>
    <ul>
</div>