Hello,
I'm trying to use the Son of Suckerfish navigation, and I'm having some trouble. Here's the link:
http://www.kkellydesign.com/gscc
http://www.kkellydesign.com/gscc/h-nav.css
I need the first level of navigation to be displayed inline, so that the spacing between them all is even. Everything else is beautiful. I've tried putting a display:inline; or width:auto; on a couple of different elements, but that changes where the drop-downs display in IE.
Also note - I'm using a transparent PNG on the drop-downs currently, which I know doesn't work in IE6. I'll put an expression in there to replace that with a gif in IE6 and below - I just haven't yet.
So, I'm stumped - thanks for your help!
EDIT -
Since it's been a couple of days, I'll actually post the code in question. I'm still hoping someone can help. Thanks -
Code:<html> <head> <style> #nav{ top:155px; left:350px; position:absolute; width: 600px; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0 0 1em 0; list-style: none; line-height: 1; } #nav a { display: block; width: 12em; color:#333333; font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif; text-decoration: none; padding: 0.25em 1em; } #nav li { /* all list items */ float: left; width: 12em; /* width needed or else Opera goes nuts */ } #nav li ul { /* second-level lists */ position: absolute; background-image:url(http://www.kkellydesign.com/gscc/images/navbg.png); background-position:bottom center; height:auto; width: 12em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ border: 1px solid #663333; margin:0; } #nav li ul ul { /* third-and-above-level lists */ margin: -16px 0 0 145px; } #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 { /* lists nested under hovered list items */ left: auto; } #nav li:hover, #nav li.sfhover { background-color:#cbc6a8; } </style> </head> <body> <ul id="nav"> <li><a href="#">Questions Answered</a> <ul> <li><a href="#">What to Expect</a></li> <li><a href="#">History</a></li> <li><a href="#">Affiliations</a></li> <li><a href="#">Mission and Vision</a></li> <li><a href="#">Meet Pastor Mike</a></li> <li><a href="#">Directions</a></li> </ul> </li> <li><a href="#">Activities</a> <ul> <li><a href="#">Calendar of Events</a></li> <li><a href="#">Philanthropy</a> <ul> <li><a href="#">Service outreach</a></li> <li><a href="#">Service project</a></li> <li><a href="#">Service project</a></li> </ul> </li> <li><a href="#">Small Groups</a></li> <li><a href="#">Impact Youth</a> <ul> <li><a href="#">Fearless leaders</a></li> <li><a href="#">Leadership training</a></li> <li><a href="#">Monday to Saturday</a></li> <li><a href="#">Links</a></li> <li><a href="#">Parents</a></li> </ul> </li> </ul> </li> <li><a href="#">Sunday Archives</a> <ul> <li><a href="#">Last week's sermon</a></li> <li><a href="#">Search archives</a></li> <li><a href="#">Browse by date</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </body> </html>
Bookmarks