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&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&T</a></li>
<li><a href="">10 Yr Anniv.</a></li>
</ul>
</li>
</ul>
</div>
