SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    Last edited by kkellydesign; Sep 27, 2007 at 04:59. Reason: I added code.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •