css drop down menu

Have you seen Sons of Suckerfish?

This is neat, but I still a little unclear about what I need to update in my css...I think I got the HTML down:

HTML:

<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="../index.asp" id="current">Home</a>
	<ul>
	<li><a href="../business/index.asp">Business</a></li>
	<li><a href="../community/index.asp">Community</a></li>
	<li><a href="../music-entertainment/index.asp">Music &amp; Entertainment</a></li>
	<li><a href="../sports-athletics/index.asp">Sports &amp; Athletics</a></li>
	<li><a href="../travel-tourism/travel-tourism.xml">Travel &amp; Tourism</a></li>
	<li><a href="../other/index.asp">Other</a></li>
	</ul></li>
    <li><a href="#">Categories</a></li>
    <li><a href="../add-event/index.asp">Add Event</a></li>
  </ul>
</div>

And here's my css:

#navcontainer ul { 
  padding: 3px 0px 4px 0px; 
  margin-left: 0; 
  margin-top: 15px; 
  background-color: #405E80; 
  color: White; 
  font-family: arial, helvetica, sans-serif; 
  clear: left; 
} 
#navcontainer ul li { display: inline; }
#navcontainer ul li a { 
  padding: 0.2em 1em; 
  background-color: #405E80; 
  color: White; 
  text-decoration: none; 
  border-right: 1px solid #fff; 
} 
#navcontainer ul li a:hover
{
background-color: #547CA8;
color: #fff;
}

anybody have any feedback on this one?

thanks
jacob

It's a bit hard to give advice when none of us know what your menu looks like or how you want it to appear.

thanks
jacob

I guess the order for display:none or display:inline or display:block is missing, which causes the drop-down.
The trick about the drop down is to not have it displayed when the page loads but to have it displayed (in a specified style) on mouseOver, in CSS :hover.
Got the idea?
Better explanation of the pure mechanism is Eric Meyer's pure css menu. Try it as pure as it is there, it helped me a lot :idea:

i tried to use the sons of suckerfish drop down as an example and changed my code to:

#nav, #nav ul {
	padding: 0; 
	margin: 0;
	list-style: none;
	clear: left;
	
}

#nav a {
	display: block;
	text-decoration: none;
	padding: 3px;
	color: white;
	background-color: #405E80;
}

#nav li {
	float: left;
	width: 10em;
}
#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
	background-color: #547CA8;
	color: #fff;
	left: auto;
}

However, the hover doesn't seem to be working? doesn't change color....also the words are to far apart, how do I fix that?

You've got rules in conflict. ALso, you don't need to respecify the color to white. Take out the first #nav li:hover ul rule. An, probably, you want the color change to occur not there, but on either #nav a:hover or #nav li:hover a:hover. I think probably the former, but I'm not sure what you're going for since you've yet to be so explicit.

->Day<-

it's

http://www.gayeventsguide.com

Yeah. You definately need a a:hover rule to change the colors, not use the li:hover thing.

->Day<-

I think I'm going to revert back to my other list I was using instead, cause it worked better...i'll be in touch, cause i still have a question on that one.

But you were so close... You just needed to style the #nav a. Ah well... When the going gets tough, I guess...

->Day<-

okay, I sort of got it working, but not quite...you can view the the navbar at:

http://www.gayeventsguide.com

It's kinda working in firefox, but not working in IE at all.

Here's the CSS I'm using:

#navcontainer ul {
 	padding: 3px 0px 4px 0px;
	margin-left: 0;
	margin-top: 15px;
	background-color: #405E80;
	color: White;
	font-family: arial, helvetica, sans-serif;
	clear: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a {
	padding: 0.2em 1em;
	background-color: #405E80;
	color: White;
	text-decoration: none;
	border-right: 1px solid #fff;
}
#navcontainer ul li a:hover {
	background-color: #547CA8;
	color: #fff;
} 
#navcontainer li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#navcontainer li:hover ul {
	left: auto;
}
#navcontainer li:hover ul, #navcontainer li.sfhover ul {
	left: auto;
}

Any ideas?

It won't work in IE cos of this:

var sfEls = document.getElementById("nav").getElementsByTagName("LI"); That line of javascript is looking for an element called nav; yours is called navlist. You need to change the name of your <ul> or change the name in the javascript. For Firefox, give this a go:

#navcontainer ul {
 	padding: 0px;
height: 24px;
	background-color: #405E80;
	color: #FFF;
	font-family: arial, helvetica, sans-serif;
	clear: left;
list-style: none;
}
#navcontainer li, li li { float: left; }
#navcontainer ul li a {
display: block;
height: 18px;
	padding: 0.2em 1em;
	background-color: #405E80;
	color: #FFF;
	text-decoration: none;
	border-right: 1px solid #fff;
}
#navcontainer ul li a:hover {
	background-color: #547CA8;
	color: #fff;
} 
#navcontainer li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#navcontainer li li { 
	position: relative; 
width: 10em;
	left: 0; 
	background: #00A2A6; 
	border-top: 1px solid #FFF;
}
#navcontainer li li a { 
	font-size: 85%; 
	padding: 0.2em 0.4em 0.3em; 
	color: #FFF;
	text-indent: 0;
}
#navcontainer li li a:hover { padding: 0.2em 0.4em 0.3em; color: #FFF; background: #547CA8; }
/* lists nested under hovered list items */
#navcontainer li:hover ul, #nav li.sfhover ul { left: auto; }

Idea no, I'm sorry, but the Safari feedback: the dropdown is sticking left and there's a gap between the main-menu that makes it impossible to reach the links on the dropdown, it's simply just disappearing even if I'm fast ...
Phhew, looks like difficult work ...

This bolded line is a problem. You'll have to over-ride this for #navcontainer li ul. This is what's causing the drop-down to be so far down.

I fought with drop-downs just like this. In case the search function is turning up too much for you, here are a couple of links to those. I hope you find them helpful.

Fly-out menu positioning oddly
Show CSS rule to Opera Only
Suckerfish without float: left?

->Day<-

Tyssen, can I just tell you how amazingly awesome you are!

Okay, it's working flawless in FireFox and Netscape. However, our good friend IE, is doing something funky...any ideas on that one?

http://www.gayeventsguide.com

thanks
j

For IE, add margin: 0 to #navcontainer ul and add something like width: 8em to #navcontainer ul li.
And then this line:

#navcontainer li:hover ul, #nav li.sfhover ul { left: auto; } should be

#navcontainer li:hover ul, #navcontainer li.sfhover ul { left: auto; } And lastly, move your script before the </head> tag and change

var sfEls = document.getElementById("navcontainer").getElementsByTagName("LI"); to

var sfEls = document.getElementById("navlist").getElementsByTagName("LI");

we're making progress

seems like evertyhing is working okay, but the drop down looks a little funky, you can see it at:

http://www.gayeventsguide.com

the letters are scruntched and not filling out the full size of the drop down, and also has that extra teal color to it that shouldn't be there?

OK, this should work in FF & IE:

 #navcontainer ul {
	padding: 0px;
	height: 24px;
	margin: 0;
	background-color: #405E80;
	color: #FFF;
	font-family: arial, helvetica, sans-serif;
	clear: left;
	list-style: none;
}
#navcontainer li, li li { float: left; }
#navcontainer ul li a {
	display: block;
	height: 18px;
   padding: 0.2em 1em;
   background-color: #405E80;
   width: 6em;
   color: #FFF;
   text-decoration: none;
   border-right: 1px solid #fff;
}
#navcontainer ul li a:hover {
   background-color: #547CA8;
   color: #fff;
}
#navcontainer li ul {
   position: absolute;
   width: 10em;
   left: -999em;
}

#navcontainer li li {
	position: relative;
	width: 10em;
	left: 0;
	border-top: 1px solid #FFF;
}
#navcontainer li li a {
	width: 10em;
	height: auto;
   font-size: 85%;
   color: #FFF;
}
#navcontainer li li a:hover { 
	color: #FFF;
	background: #547CA8; 
}
/* lists nested under hovered list items */
 #navcontainer li:hover ul, #navcontainer li.sfhover ul { left: auto; }

you're awesome, thanks tyssen!

it worked!