CODEWITHSUNDEEP
cssmenuhover
Lina
Lina

Reputation: 627

CSS, menu:active not working

I have a simple menu:

<ul id="menu2">
    <li> <a href="index.php?id=home">Home</a></li>
    <li> <a href="index.php?id=about">About us</a></li>
    <li> <a href="index.php?id=contacts">Contacts</a></li>
</ul>

And in css file I have:

#menu2 {
    background: black;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 220px;
}
#menu2 li {
    margin: 0;
    padding: 0;
}
#menu2 a {
    background: black;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 9px 16px;
    text-decoration: none;
}

#menu2 a:hover {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

#menu2 a:active {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

Everything works well except for #menu2 a:active not working at all while #menu2 a:hover (with same rules) works well. What is the problem? Did I miss something?

Upvotes: 0

Views: 10013

Answers (3)

Jeff Wilbert
Jeff Wilbert

Reputation: 4520

Can you provide more details of what exactly is not working and/or a demo. Looking at the code it appears to be fine.

The :active state refers to when a link is pressed, so if you press and hold your mouse button down on your menu item it should be working as expected since hover works active has the same properties.

A link with :active will not remain that way when your on the page it links too, it reverts back to a normal link.

Upvotes: 2

stursby
stursby

Reputation: 879

Your background for :hover and :active in the code above is the exact same.

Are you trying to set a background x and y position on active?

Without image background and different colors (for testing) your code works fine: see here http://jsfiddle.net/stursby/9Pccb/

Upvotes: 0

Smamatti
Smamatti

Reputation: 3931

It is working as expected. I colored the active state red.
Try clicking on en element and hold the button down. The background will be red.

You don't see a change, because you CSS for hover and active are identical!

Sample
http://jsfiddle.net/dqH3F/1/

Sample contains

#menu2 a:active {
    background: red url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

Upvotes: 3

Related Questions