I've been working on this for a while and I've had varying levels of success but have not been able to achieve what I'm after so far. I'm looking to do this with CSS, no jquery or anything like it. I followed the "Son of Suckerfish" tutorial and that got me somewhat there, but when I tried to make the 2nd level dropdown, it started getting all funky and I haven't been able to figure it out. Not to mention, it isn't working properly in IE9 or FF, only Chrome and Safari (for Windows). Below is the design view of the dropdown navigation: So far, I've gotten it most of the way, but the 2nd level area with the green background, it does funky things with positioning and seems as if it has 2 different colored backgrounds. I'm sure it has something to do with the way the jquery is being used to position the first dropdown and it's causing the 2nd to act funny.Basically, I'd like to get rid of the jquery, or at least figure out how to make it work with the way I've got it setup, and then figure out why the positioning is all wonky on the 2nd dropdown. Below is my CSS:
/* Navigation */#nav {font-family:Georgia; position: relative; width: 900px; height: 30px; font-size: 16px; font-weight: bold; color: #333; margin: 0px auto; padding:20px 14px 0 0;}#nav ul {list-style: none;}#nav a:link, #nav a:visited {display: inline-block; text-decoration:none; color:#333; padding: 0 10px; margin:0 6px 0 6px;}#nav a:active, #nav a:hover {background: #3d3d3d; color: #cbdb2a;}#nav li {float: left; width: auto;}#nav li ul {position: absolute; width: 8em; left: -999em; text-align: center;}#nav li:hover ul.nav_dd_1 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 82px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_2 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 157px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_2 li ul li a {background: #cbdb2a; color: #333;}#nav li:hover ul.nav_dd_3 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 158px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_4 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 163px; margin: 0 6px 0 6px;}#nav ul li:hover ul li a:hover {background: #cbdb2a; color: #333; }#nav li:hover ul, #nav li.sfhover ul {left: auto; text-align: center; }#nav li ul ul {margin: -25px 0 0 183px; width: 157px; background: #cbdb2a; color: #333; font-family: Arial; font-size: 12px; height: 25px;}#nav ul li:hover ul li ul li a:hover {background: #fff; color: #333; margin-left: 0px; height: 25px; width: 157px;}#nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;}
And the HTML:
<div id="nav"> <ul> <li><a href="#1">Why Lake</a>| <ul class="nav_dd_1"> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#2">Community Profile</a>| <ul class="nav_dd_2"> <li><a href="#">Test Link</a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> </ul> </li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#3">Business Retention</a>| <ul class="nav_dd_3"> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#4">Business Attraction</a>| <ul class="nav_dd_4"> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#5">News</a>| </li> <li><a href="#6">About Us</a> </li> </ul></div>
I'm looking for any help anyone is willing to offer. Thanks!