Change Drop-Down Menu Attributes

  • Resolved breecrowder

    (@breecrowder)


    8 years, 9 months ago

    As you can see on this page, my drop-down menu is currently using a dark grey background with white text, that when you hover over turns black. I’m looking to change all of these colours:

    Drop-Down Background: #ffffff
    Text (Before Hover): #6DAE90
    Text (After Hover): #000000

    Thanks for your help!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi there,

    The dropdown menu’s background can be changed using the following snippet:

    .main-navigation ul ul {
    background: #fff;
}

    The snippet for text before hover is as follows:

    .main-navigation ul ul li a {
    color: #6DAE90;
}

    The text when the links are hovered over and visited is already set to #000 but, for good measure, the snippet to change it would be as follows:

    .main-navigation ul li:hover > a, .main-navigation ul li:hover > a:visited {
    color: #000;
}

    You can change the value of color in any of the above snippet to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values.

    Here’s an example of a site that I’ve used before:

    https://www.color-hex.com/

    I can see you’ve been making a few custom CSS changes recently too and, in case you’re interested in learning more, wanted to share the following resources with you:

    https://www.htmldog.com/guides/css/beginner/
    https://www.westciv.com/style_master/academy/css_tutorial/
    https://www.codecademy.com/learn/web

    CSS is a fun and super useful skill to learn. ??

    Thread Starter breecrowder

    (@breecrowder)

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change Drop-Down Menu Attributes’ is closed to new replies.