Menu
I have problem while make menu using CSS. The problem is I would like to use :active to make my current button highlighted. But after tried so many times, I still can't find how to implement it in my code.
I use <li> tag inside <a> tag to make sure the button background and text color change while selected, because after tried to put <a> tag outside <li> tag the text color not changed when select the button, the text only change after I put the cursor into the text.
Need your help.
This is my CSS code:
a, body {
margin-top:-30px;
text-decoration:none;
}
#topmenu {
margin-left:170px;
cursor:pointer;
}
#topmenu li {
color:white;
list-style:none;
float:left;
margin-right:5px;
padding:20px 15px 10px 15px;;
box-shadow:1px 1px 1px grey;
-webkit-box-shadow:1px 1px 1px grey;
-moz-box-shadow:1px 1px 1px grey;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #004890);
background: -webkit-gradient(linear, left top, left bottom, from(#004890), to(#2F2727));
text-shadow: 1px 1px 1px #555;
}
#topmenu li:hover, #topmenu li:active
{
background: -moz-linear-gradient(100% 100% 90deg, #FED93A, #FEC13A);
background: -webkit-gradient(linear, left top, left bottom, from(#FEC13A), to(#FED93A));
color:black;
padding-top:30px;
}
#topmenu #home {
margin-right:10px;
}
#topmenu #logout {
background:#000;
color:white;
}
and this my HTML code:
<div id="topmenu">
<ul>
<img src="includes/menu/pics.gif" alt="" style="float:left;"/>
<a href="../folder/home.php"><li id="home">Home</li></a>
<a href="../folder/A.php"><li>A</li></a>
<a href="../folder/B.php"><li>B</li></a>
<a href="../folder/C.php"><li>C</li></a>
<a href="../"><li id="logout">Logout</li></a>
</ul>
</div>
291
asked Dec 11 '25 17:12
You are missing the point mates. The :active pseudo class does not work like this.
:active sitepoint CSS reference
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners
What he wants to acheive is apply styles to the current a which has nothing to do with the above "active pseudo-class".
There are many ways you could acheive this.
First
Second
Third
Fourth
187
I think the problem is that :active doesn't mean what you think it does.
:active triggers when you click on an element, but before you let up on the mouse button. See the CSS spec on dynamic pseudo classes.
Here's an example HTML page, with :active on both the <a> and <h1> elements, you'll see the text color changes to blue when you click and hold down the mouse button.
<html>
<head>
<style type="text/css">
a, h1 { color: red; }
a:active, h1:active { color: blue; }
</style>
</head>
<body>
<h1>headline</h1>
<a href="#">link</a>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
