Hey CSS Gurus!! I'm reasonably sure this topic has been touched on before but I'm obviously not searching with the right keywords.
I'm working with a client on a sports team fan website. One thing that he would like to have is a horizontal navigation row similar to that of
SI.com. I have looked at their code and they use a lot of JS and its not very pretty.
I set up some base code using nested unordered lists and have begun to work on the CSS for this. Works fine in Firefox 0.9 and not at all in IE6. Go figure I've dumbed it down a bit (got rid of all the horizontal rules) so you can see what i'm working with.
Hopefully somebody can point me to a tutorial or something to make this work. Thanks for the help guys and gals!!!
HTML Code:
<html>
<head>
<title>Test Nav</title>
<style type="text/css">
ul.nav li ul.subNav
{
display: none;
}
ul.nav li:hover ul.subNav
{
display: block;
}
</style>
</head>
<body>
<h1>Test Nav<h1>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Recruiting</a></li>
<li><a href="#">PhotoPost</a></li>
<li><a href="#">Football</a>
<ul class="subNav">
<li><a href="#">Schedule</a></li>
<li><a href="#">Scores</a></li>
</ul>
</li>
<li><a href="#">Basketball</a>
<ul class="subNav">
<li><a href="#">Schedule</a></li>
<li><a href="#">Scores</a></li>
</ul>
</li>
<li><a href="#">Baseball</a>
<ul class="subNav">
<li><a href="#">Schedule</a></li>
<li><a href="#">Scores</a></li>
</ul>
</li>
<li><a href="#">Other Sports</a></li>
<li><a href="#">Hall of Fame</a></li>
<li><a href="#">Site Info</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Article Archives</a></li>
<li><a href="#">Advertising</a></li>
</ul>
</body>
</html>
