On May 16, 2008, at 4:40 PM, bludog wrote:
> 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.
You're using multiple elements with the same ID, which is not valid.
Instead of using an ID, use a class (and change your selector to match).
Also, I'd recommend using .hover(fn, fn) rather than .mouseover()
and .mouseout()
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On May 16, 2008, at 4:40 PM, bludog wrote:
> 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>
