SuckerFish dropdown menu question

Hi,
I'm using the suckerfish dropdown menu, and it's working great.

I've been asked to do a couple things to our site, 1 was to have each top level button be a different color (to show a different category). I was able to do this OK.

I was then asked, that the main top level button NOT change color when the mouse is placed over them. But have the menu items change to the color of it's top level button when the mouse is over each.

The part I can't seem to figure out is how to make the top level button not change color?

Here is my CSS that I've been messing with. Does anyone have some suggestions?

body {
	background: #C9DBED;
	padding: 0;
	margin: 1em 2em 2em;
	font-family: arial, helvetica, serif;
	font-size: 75%;
}

#container {
	width: 800px;
	text-align: left;
	border: 1px solid #CEDBFD;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}



#nav, #nav ul {
	float: left;
	width: 800px;
	list-style: none;
	font-weight: bold;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 1px;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #A7BEFC;
	border-right-color: #A7BEFC;
	border-bottom-color: #A7BEFC;
	border-left-color: #A7BEFC;
	line-height: 1;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1em;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-size: 11px;
}



#nav a {
	display: block;
	width: 11.75em;
	color: #273D94;
	text-decoration: none;
	text-align: center;
	padding-top: 0.25em;
	padding-right: 0em;
	padding-bottom: 0.25em;
	padding-left: 0em;
}




#nav a.daddy {
	background: url(../images/rightarrow2.gif) no-repeat right center;
	
}


#nav a.down {
	background: url(../images/down1.gif) no-repeat right center;
	margin-right: 3px;
	
}

#nav li {
	float: left;
	width: 11.8em;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 1px;
}



#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
	background-color: #FFFFFF;
}
#education {
	background-color: #BEB400;
}


#nav li li {
	padding-right: 1em;
	width: 13.5em;
}

#nav li ul a {
	text-align: left;
	width: 14em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

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

#nav li:hover, #nav li.sfhover {
	background: None;
	background: no-repeat;
}


#content {
	clear: left;
}


#content a {
	color: #7C6240;
}

#content a:hover {
	text-decoration: none;
}

#resources {

	background-color: #E1C87D;
}
#technical {

	background-color: #E1C87D;
}
#empresource {


	background-color: #C8F0FA;
}
#team {

	background-color: #EB7D00;
}
#technical li:hover {


	background-color: #FFC87D;
}
#home {
	background-color: #B4821E;
}
#resources li:hover {

	background-color: #E1C87D;
}
#education li:hover {

	background-color: #BEB400;
}
#team li:hover {

	background-color: #EB7D00;
}
#empresource li:hover {

	background-color: #C8F0FA;
}

Code (markup):

 

Okay wait, this is the whole page's CSS, right? And the part you want to change is all under #nav, right? So far I don't see where you have different colours for each menu selection, I only see border colours and everything dropping down to have a background colour of white... unless the ids on the bottom are part of your menu, the Home, Team, Empresource etc?

Well, I assume you have different id's for everything because they originally asked you to use a different colour for each part. Better to have them be classes instead, since the only difference they have is colours. They are all in the navigation together.

I think you'd take all those different bottoms and give them the same background colour, and add different colours to your #nav li ul using the classes. So for instance if you gave the li part of your HTML the class name of "home" (just change "id" to "class") then you could have

#nav li.home ul {
    background-color: #whatever;
}
#nav li.team ul {
    background-color: #whatever else;
}

Code (markup):

et cetera.
Meanwhile your main header navigation #nav li (no class names as this should apply to all of them) would have background-color: #whatever they want all of them to look like; and color: #whatever the words should be.

Unless I read it wrong and the main navs are still supposed to look like different colours. If that's the case, then still use classes, but name the original colour under #nav li.home (and #nav li.team etc), and then still use the #nav li.home ul example above for each sub-menu.
It looks like you'd have to do this for a large number of menus, and there may be a quicker way I don't know...

Gimme a minute and I'll see if I can post a good version...

 

I'm still learning CSS myself, but try this:

/*CSS for illegal*/

* {
margin: 0;
padding: 0;<--gets rid of a lot of margins and padding first so you don't need
all those margin: 0's tho within the list itself the browser may still add 
margin and padding...
} 
body {
	background: #c9dbed; <-- get in the habit of lower case for the future
	margin: 1em 2em 2em;
	font: 75% arial, helvetica, serif; <-- shorthand font
}

#container {
	width: 800px;
	text-align: left;
	border: 1px solid #cedbfd; <--lower case
        <-- all margin 0's removed : )
}



#nav, #nav ul {
	float: left;
	width: 800px;
	list-style-type: none;
	font-weight: bold;
	border: 1px solid #a7befc; <-- border shorthand tho you did have
left and right borders with a colour but width of 0 so I assumed you
wanted a border around everything, otherwise use:
        
        border: 1px 0px solid #a7befc; <-- which says top and bottom are 1px
and the sides are 0 (added "px" so you knew it was size)

	line-height: 1;
	margin-bottom: 1em;<-- all other margins assumed to be 0
	paddings are already 0 otherwise just use "padding: 0;" for all
	font-size: 11px;
}



#nav a {
	display: block;
	width: 11.75em;
	color: #273d94;
	text-decoration: none;
	text-align: center;
	padding: 0.25em 0; <-- first number = top/bottom, second = left/right
}




#nav a.daddy {
	background: url(../images/rightarrow2.gif) no-repeat right center;
	
}


#nav a.down {
	background: url(../images/down1.gif) no-repeat right center;
	margin-right: 3px;
	
}

#nav li {
	float: left;
	width: 11.8em;
	padding-right: 1px; <--other paddings assumed 0
}



#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	font-weight: normal;
	border-width: 0.25em;
	background-color: #fff; <-- if all the same letter or number, can use just three
        however, remove this if you don't want them to all be white
}



#nav li li {
	padding-right: 1em;
	width: 13.5em;
}

#nav li ul a {
	text-align: left;
	width: 14em;
	border-bottom: 1px solid #ccc; <--border shorthand
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

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

#nav li:hover, #nav li.sfhover {
	background: none; <-- default if there is no image to add, so you can remove this
	background: no-repeat; <--ditto
}

#content {  <--I wasn't sure if this was a nav button too or not, so I left it out
	clear: left;
}


#content a {
	color: #7c6240; <--lower case
}

#content a:hover {
	text-decoration: none;
}

/************NEW STUFF******************/

#nav li.home {  <--this is just the home button, first level
	background-color: #b4821e;
}
 #nav li.home ul {   <--this is the stuff that appears under the home button, same colour
	background-color: #b4821e;
}

/*Which can be shortened I think to: */
#nav li.resources, #nav li.resources ul { <-- this is both the resources button and sub-menu
        background-color: #e1c87d;  <--lower case
}


#nav li.education, #nav li.education ul {
	background-color: #beb400;
}

#nav li.technical, #nav li.technical ul {
        background-color: #e1c87d; <--lower case
}

#nav li.empresource, #nav li.empresource ul {
        background-color: #c8f0fa; <--etc
}

#nav li.team, #nav li.team ul {
        background-color: #eb7d00;
}

<--removed all the hover background changes, because the sub-menu doesn't show unless you're hovering and you
have that covered anyway.

Code (markup):

For most of the comments I did not use proper outcommenting, but used the <--arrow (it looks like an arrow to me). These need to be deleted.

 

Thank you for replying, I didn't get a email notifcation so didnt' know anyone replied to this.

I've tried your code, and it's getting closer.

What they would like is to have the drop down menus have a background color of white, until they move the mouse over each. Then they would like to have the menu option change to the color of the main button (the main button never changes color)

I've tried your code, for me it makes the drop down menus have the same color background as the top level button, and the drop downs dont' change color with a mouse over?

Is that how it works for you?

 

I think I got it, not sure if this is right or not but it seems to work.

#nav li.empresource, #nav li.empresource ul {
        background-color: #FFFFFF; 
}
		
#nav li.empresource, #nav li.empresource ul li:hover {
	background-color: #c8f0fa; 
}

Code (markup):

The main button doesn't change colors, the drop down have a white background by default, and then change to the main button color on mouse over.

anyone see anything wrong with doing it this way?

 

Ah, so the main top buttons are each a different colour, and when the mouse hovers over the main top button, a drop-down appears which is white background. Then, as the mouse scrolls down, each part of the menu highlights with the colour of the button above? Like if HOME is red, then its dropdown is white, and then as the mouse moves down, each sub turns its background red.
Your Code:
#nav li.empresource, #nav li.empresource ul {
background-color: #FFFFFF;
}

#nav li.empresource, #nav li.empresource ul li:hover {
background-color: #c8f0fa;
}

The only thing wrong with your code here is that the first part does nothing, and by first part I mean
"#nav li.empresource,"
What you want to have colours is stuff for the mouse (a, link, visited, hover, active). So, for regular links not touched by mice, use
#nav li.empresource a, #nav li.empresource a:visited {
background-color: #fff;
}
and then for when touched by mice:
#nav li.empresource ul a:hover {
background-colour: #c8f0fa;
}

empresource only has one drop-down right? No sub things further? Cause in that case, you could also add the colour for that too:
#nav li.empresource ul ul a:link, #nav li empresource ul ul a:visited {
blah
}
#nav li.empresource ul ul a:hover {
blah
}

: )

 

Yes, that's what I need it too do.

I thought I had it with the code I had earlier, but it appears to only work with IE7. The users I have with IE6, say the background doesn't change colors in the dropdown menus.

So I just tried your suggestion.

#nav li.empresource a, #nav li.empresource a:visited {
background-color: #fff;
}
and then for when touched by mice:
#nav li.empresource ul a:hover {
background-colour: #c8f0fa;
} 

Code (markup):

what I find with this is, the top level buttons stay thier originally color. But the drop down menus have the same background color as their top level by default. So when you move your mouse over the menu items, nothing happen.
Where can I set the background of the dropdowns to white?

 

I'm not sure what i'm doing wrong.

I tried this

#nav li.empresource a, #nav li.empresource a:visited {
	background-color: #c8f0fa;
}

#nav li.empresource ul a:link, #nav li.empresource ul a:visited  {
	background-color: #FFFFFF;
} 
#nav li.empresource ul a:hover {
	background-color: #c8f0fa;
} 

Code (markup):

This works for me (IE7). The top level are the bluish color, the dropdown menus are white, and then turn to the same bluish color when the mouse is moved over it.

So I had someone with IE6 try it, and the menu buttons don't change color when the mouse is moved them.

 

Hmm, did they clear their cache (history)? In case the IE6 was remembering old code.

The only other thing I can think of is trying to make the sub-menu part more specific-- with CSS, supposedly, the more specific the part of the page is, then those rules override general rules.

Let's try this:

#nav li.empresource ul [b]li[/b] a:link, #nav li.empresource ul [b]li[/b] a:visited  {
	background-color: #FFFFFF;
} 
#nav li.empresource ul [b]li[/b] a:hover {
	background-color: #c8f0fa;
}

Code (markup):

What I'm trying is naming not only the nested ul, but the actual list elements under that too. You have
<ul>MAIN
<li>MAIN LIST
<ul>sub
<li>sub-list</li> <---hopefully targeting this sub link will do the trick
</ul>end sub
</li>END MAIN LIST
</ul>END MAIN


If that doesn't work, try this:
#nav ul ul a.empresource, #nav ul ul a.empresource:visited {
blah
}
#nav ul ul a.empresource:hover {
blah
}

Otherwise I am lost on this; it's a good sign that it works in IE7 which so far of the M$ browsers deals with CSS the most correctly. I'm currently dealing with my own issues with menus so I'm finding more and more stuff I didn't know I didn't know (Rumsfeld saying). If I happen to run across something similar and find the answer (or run across it in one of my CSS books), I'll let you know.

Remember to check the site in FF, Oprah --er, Opera and Safari : )

 

I think I found the problem,
The suckerfish menu uses some javascript to make it work with IE.
Then in the CSS there was a sfhover added, just for IE.

Since IE7 is closer to reading CSS right, it must not need the sfhover anymore, so it renders the menu right. But most of our users still have IE6, hopefully they upgrade soon. Then it should just fix itself once they upgrade

 

As I understand it, the hover is for IE 6 and under which will hover, but only over links. I thought once that I could just have fake links (a href="#") but that doesn't work : )

I put on the bottom of my site a little text saying the universe would be a better, more peaceful and prosperous place if one upgraded to: FF2+, IE7, or Opera 9+.

People with OSes lower than Service Pack 2 for XP can't get IE7 though (that I know of) : ( so it's going to be a long time with IE6.

The js was the only reason I looked further than suckerfish -- it's a very nice menu. And only 12 lines, not so bad. Be aware, customers with IE6 or lower with js turned off will still have problems.

 

This is for an intranet, and they can't upgrade their browsers until IT says they can. No firefox or anything else

I really wish they could all upgrade, because this problem would be solved for me if they could.

I'll have to keep working on it, and see if I can get something close to what they want (in IE6). It's working fine for me since I have IE7, that's the hard part. I have to keep trying it out on a co-workers machine to see if my changes are working