Home/ Questions/Q 8975371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:51:41+00:00

I am stuck on something that seems very simple but I must be missing

  • 0

I am stuck on something that seems very simple but I must be missing some minor detail.
I have this div:

<div id="menu" class="menu_div">
<a href="/">HOME</a> | 
<a href="/pics.php">PICTURES</a>
</div>

And the following inside the style tags

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
    a:link {color:#000000; text-decoration:none;}      /* unvisited link */
    a:visited {color:#000000; text-decoration:none;}  /* visited link */
    a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
    a:active {color:#FF0000; text-decoration:none;}  /* selected link */
}

Everything works except the links. I tried other combinations like .menu_div a:hover etc, nothing seems to work, any idea why?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t see any SASS or LESS tags, so here is the solution – you can’t have nested rules in CSS. You must define them separately:

    .menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}   /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}     /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}    /* selected link */
    • 0