[jQuery] Jquery Help - Navigation

[jQuery] Jquery Help - Navigation


This is probably something very basic, but why does this logic only
work for the first section of ul's in the nav and not the next? Please
enlighten me. Thanks.
<style type="text/css">
        body, body * {margin: 0px; padding: 0px;}
        ul#mainNav li{display: inline;}
        #nav{background: tan; width: 100%; font-size: .90em; text-align:
center;}
        ul#mainNav a { text-decoration: none; padding-right: 6px; padding-
left: 6px; color: #fff;}
        ul#mainNav a:hover { background: #000; color: #fff; padding-top:
0px;}
        #subNav{background: #000 !important; color: #fff; float: left;
clear: left;}
        #mainNav li ul {display: none;}
        #subNav ul li a:hover{color: #000; background: #fff !important;}
        #mainContent {clear: both;}
    </style>
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#subNav").each(function(){
        $(this).mouseover(function(){
             $(this).next('ul').show();
        });
    $(this).mouseout(function(){
             $(this).next('ul').hide();
        });
    });
});
</script>
</head>
<body>
<div id="nav">
<ul id="mainNav">
    <li><a id="subNav" href="">About</a>
        <ul>
            <li><a href="">The Story</a></li>
            <Li><a href="">FAQ</a></LI>
            <li><a href="">Designs and DSA</a></li>
            <li><a href="">Mission</a></li>
            <li><a href="">OTC</a></li>
            <li><a href="">POJD</a></li>
            <li><a href="">B&amp;T</a></li>
            <li><a href="">10 Yr Anniv.</a></li>
        </ul>
    </li>
    <li><a id="subNav" href="">About</a>
        <ul>
            <li><a href="">The Story</a></li>
            <Li><a href="">FAQ</a></LI>
            <li><a href="">Designs and DSA</a></li>
            <li><a href="">Mission</a></li>
            <li><a href="">OTC</a></li>
            <li><a href="">POJD</a></li>
            <li><a href="">B&amp;T</a></li>
            <li><a href="">10 Yr Anniv.</a></li>
        </ul>
    </li>
</ul>
</div>