20 replies [Last post]
planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

On my web site, gayeventsguide.com, I have a in my menu a space for "Categories"

How do I make it drop down?

My categories are:

Business
Community
Music & Entertainment
Sports & Athletics
Travel & Tourism
Other

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css drop down menu

Have you seen Sons of Suckerfish?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

cool

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;
}

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

feedback

anybody have any feedback on this one?

thanks
jacob

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: cool

planeboy747 wrote:
This is neat, but I still a little unclear about what I need to update in my css.

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

RH
RH's picture
Offline
Regular
Germany, Berlin
Last seen: 13 years 51 weeks ago
Germany, Berlin
Timezone: GMT+1
Joined: 2005-10-25
Posts: 42
Points: 0

Re: feedback

planeboy747 wrote:
anybody have any feedback on this one?

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:

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

ok

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?

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 1 week ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

css drop down menu

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<-

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

oops, sorry

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 1 week ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

css drop down menu

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

->Day<-

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

you know

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.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 1 week ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

css drop down menu

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

->Day<-

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

okay, sorta got it working

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css drop down menu

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; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

RH
RH's picture
Offline
Regular
Germany, Berlin
Last seen: 13 years 51 weeks ago
Germany, Berlin
Timezone: GMT+1
Joined: 2005-10-25
Posts: 42
Points: 0

css drop down menu

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 ...

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 1 week ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Re: okay, sorta got it working

planeboy747 wrote:
#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;
}

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<-

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

thank you

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

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css drop down menu

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");

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

alright

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css drop down menu

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; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 7 years 11 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

you're awesome!

you're awesome, thanks tyssen! Smile

it worked!