Question

my problem is that if I hover over a link, the background changes as I would like it to. However when I move to the next link, it stays that way and if I move to the last link, all the links look like they are on hover. But they all return to normal if i remove the mouse off the links. It’s like a step sequence. If link 1 is hovered, only link 1 is affected. If link 2 is hovered, anything above link 2 is also hovered and same for link 3. Anything above link 3 will be hovered. How can I fix this so it is going to hover individually? Any help will be appreciated. Thanks. This is my CSS code:

#profilebarsectiondiv {
    width: 100%;
    background-color: #285059;
    font-family: sans-serif;
    font-weight: bold;
    color: #ffffff;
}

.profilebarlink{
    width: 100%;
    background-color: #dce8ea;
}

.profilebarlink a{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 8;
    text-decoration: none;
    color: #206676;
}

.profilebarlink:hover{
    background-color: #e67e17;
}

And my HTML

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a>
<div class="profilebarlink"><a href="#">Profile</a>
<div class="profilebarlink"><a href="#">Contacts</a>

Answer 1

You need to close your <div> tags

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a></div>
<div class="profilebarlink"><a href="#">Profile</a></div>
<div class="profilebarlink"><a href="#">Contacts</a></div>