- This topic is empty.
-
AuthorPosts
-
January 10, 2011 at 1:08 pm #31205minnowMember
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 :
MinnowJanuary 10, 2011 at 3:21 pm #66696jamygoldenMemberIt’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.
January 11, 2011 at 11:17 am #66581minnowMemberHi 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 :-)January 12, 2011 at 3:12 am #66342jamygoldenMemberYour 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.
January 12, 2011 at 4:40 am #66272minnowMemberHi 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 byul.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. :-)
January 12, 2011 at 5:06 am #66273jamygoldenMemberNo problem =)
Add this to your CSS:
ul.dropdown .red li.hover {
background-color: #F5979C;
color: #0D0D0D;
}That should solve it.
January 12, 2011 at 5:33 am #66274minnowMemberHmm I just tried that and it doesn’t make any difference…odd eh?
January 12, 2011 at 6:04 am #66275jamygoldenMembertry this:
li.red2:hover{
background-color: #F5979C;
}January 12, 2011 at 6:22 am #66278minnowMemberThat’s it! You’re a good’un jamey_za! Thank you for solving that headache for me :-)
January 12, 2011 at 6:31 am #66279minnowMemberdon’t suppose you would know how to get the menu to stretch accross the width of the site?
January 12, 2011 at 6:43 am #66280jamygoldenMemberIt’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;
}January 12, 2011 at 6:49 am #66281minnowMemberAh 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.January 12, 2011 at 7:24 am #66282jamygoldenMemberNo 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 :)
January 26, 2011 at 11:19 am #63847minnowMemberHi 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.
January 26, 2011 at 12:19 pm #63848jamygoldenMemberHey minnow :)
Try this:
ul.dropdown .red li.hover{
color: #0D0D0D;
background-color:#f9c0c6;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.