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

Home Forums CSS Make secondary link color in main-navigation li

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #192909

    Hello again!

    My top page links (which are organized into a box list) have a black background with pink text. When the mouse pointer hovers over them, the background changes to pink and the text to white. Both of these style elements are respectively organized under the “main-navigation li a” and “main-navigation li a:hover” IDs. However, I’d like add to and alter the code so that some of the links have a different text color and hover background color besides pink.

    But neither creating a span nor creating a new ID and applying it to the ul or li seems to work. And I can’t seem to find anything on Google either. Does anyone have any suggestions?


    We can’t diagnose code we have not seen.

    If you can make a demo in Codepen we might be better able to assist.


    This is the code.


    If you are sure that there will be exactly 5 items in your top navigation, then you can use nth-child selector to style each of the links and if you aren’t then you can add class to each list items to get the desired look.

    Here’s the example

        #main-navigation li:nth-child(2) a:hover {
          background: orange;
          color: #fff;
        #main-navigation li.about:hover a {
          background: #f1f1f1;
          color: #000

    One think I would say is that although it’s OK to use Ids…it’d generally considered a better idea to only use them when required.

    It’s much better to use a class which enables that ‘reference’ to be re-used.

    As for your specific issue there are multiple options but they will all require extra CSS.

    The best option for you here is to give each li a class of it’s own as @kwerty has indicated.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.