Forums

minnow

Hi guys,

I am working on this dropdown menu. I would like each of the vertical columns to be a different colour and then the dropdowns to be a shade of that colour. I have managed to get the first column to work correctly, however now the top row of each of the columns takes on the colour of the first column when you roll over it. Any ideas how to change this?
The first colum is an example of how it should behave.
I would also like to make the menu bar fill the width of the page.
Any suggestions anyone?
Many thanks for your help :
Minnow

jamy_za

It's due to this:

ul.dropdown .red li.hover, ul.dropdown li:hover {
	 background-color: #F5979C;
	 color: #0D0D0D;
}

That is forcing the .red li:hover to be red, and all other li:hovers to be red too.

minnow

Hi Jamy_za
thanks for your reply.
Yes you're right, this is forcing the others to be red too. The problem is, is that if that is not there then it automaticly fetches the top row hover colour from lines 217-223. What I'd like is the top row to stay the same colour when you roll over, and then on the dropdown part, the hover to take the colour of the top row.
At the moment this functions correctly in the red column, but then in the others there is the red issue we've already discussed.
I guess it needs a few extra lines of code adding in, but I can't see what! You got any ideas?
Thanks :-)

jamy_za

Your css contains:

ul.dropdown li.hover, ul.dropdown li:hover {
	 background-color: #0D0D0D;
	 color: #fff;
}

and

ul.dropdown .red li.hover ,ul.dropdown li:hover {
	 background-color: #F5979C;
	 color: #0D0D0D;
}

remove the background-color property from both of them and it should be fine.

minnow

Hi Jamy_za
thanks again for your help on this one. I have done as you suggested. Now we just need to add the hover colour for the dropdown on the red column. Previously this was managed by

ul.dropdown .red li.hover ,ul.dropdown li:hover {
         background-color: #F5979C;
         color: #0D0D0D;
}

how can I add in the hover colour in without it affecting all the other columns again?

I really appreciate you helping me out with this! Cheers. :-)

jamy_za

No problem =)

Add this to your CSS:

ul.dropdown .red li.hover {
         background-color: #F5979C;
         color: #0D0D0D;
}

That should solve it.

minnow

Hmm I just tried that and it doesn't make any difference...odd eh?

jamy_za

try this:

li.red2:hover{
	 background-color: #F5979C;
}

minnow

That's it! You're a good'un jamey_za! Thank you for solving that headache for me :-)

minnow

don't suppose you would know how to get the menu to stretch accross the width of the site?

jamy_za

It's not really going to work out because of the way it was designed.

You could do something like this though:

ul.dropdown .grey {
	 text-align: center;
	 width: 67px;
}

minnow

Ah that's a nice simple way to do it, and it looks just fine.
Thanks again for all your help. I can't buy you a beer but if you let me know what charity you support I will make a donation.

jamy_za

No problem.

A couple of guys, from these forums, and myself are busy designing a website for Kindness for kids. So at the moment I'm supporting them.

Thanks a lot :)

minnow

Hi Jamy_za,

just when you thought it was safe to go back on the forum here I am!
I'm getting in a pickle with this menu again. I would like to know how to get the "parent" level background colour to change on rollover. I tried adding
background color here:

ul.dropdown .red li.hover ,
ul.dropdown  li:hover{
color: #0D0D0D;
background-color:#f9c0c6;
}

but when I do that it changes the rollover colour of all the "parents". I added in background-color for all of the different colour sections in the same way (but with the relevant colours) but this makes no difference.
Have you got any ideas of what I could do?

Thanks again. Minnow.

jamy_za

Hey minnow :)

Try this:

ul.dropdown .red li.hover{
	 color: #0D0D0D;
	 background-color:#f9c0c6;
}

minnow

Hey :-) good to hear from you.
Just tried adding that in, but it doesn't seem to make any difference. The top row stays dark.

jamy_za

This should work:

ul.dropdown .red:hover{
	 background-color: #f9c0c6;
}

minnow

Ah that's it! jamy_za you're a star!
:-D
thanks buddy

minnow

hmm... the saga continues. Am having issues with this dropdown menu in IE5 and IE6, and the whole site in IE5.
Does anyone have any ideas as to how to solve it? Do you think I need to worry about IE5 being as it's so old?
thanks for looking :-) Any help much appreciated.

jamy_za

I won't really be able to help with the IE6 menu problem with your current nav as I'm unfamiliar with your method. I would have done it like this.

Regarding IE5, the usage share is so small you can ignore it.

treehouse : what would you like to learn today?

Forums

Horizontal dropdown menu problems