Son of Suckerfish - display level 1 inline
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>
