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>
