Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal dropdown menu problems

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #31205
    minnow
    Member

    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

    #66696
    jamygolden
    Moderator

    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.

    #66581
    minnow
    Member

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

    #66342
    jamygolden
    Moderator

    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.

    #66272
    minnow
    Member

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

    #66273
    jamygolden
    Moderator

    No problem =)

    Add this to your CSS:

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

    That should solve it.

    #66274
    minnow
    Member

    Hmm I just tried that and it doesn’t make any difference…odd eh?

    #66275
    jamygolden
    Moderator

    try this:

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

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

    #66279
    minnow
    Member

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

    #66280
    jamygolden
    Moderator

    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;
    }
    #66281
    minnow
    Member

    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.

    #66282
    jamygolden
    Moderator

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

    #63847
    minnow
    Member

    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.

    #63848
    jamygolden
    Moderator

    Hey minnow :)

    Try this:

    ul.dropdown .red li.hover{
    color: #0D0D0D;
    background-color:#f9c0c6;
    }
Viewing 15 posts - 1 through 15 (of 20 total)
  • The forum ‘CSS’ is closed to new topics and replies.