Click here to Skip to main content
14,698,201 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i create a menu...but i dont know how to keep active it...
suppose my menu have ====>> Home Product About Us Contact Us
and menu color is "black" and hover effect is "gray"

==> Now My question is that
if i click on "home" then "home" link have to active(highlighted) with "maroon" or whatever color
if i click on product then product have to active with maroon color
or etc...

==>> sorry for my awkward explaination..

<html xmlns="">
    <link href="temp.css" rel="stylesheet" type="text/css" />
<div class="div2">
    <div class="div1">
            <li><a href="#" class="noborder leftside_radius">Home</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="" class="rightside_radius">Contact Us</a></li>


    margin: 0px;
    margin-left: 0px;
.div1 ul li
    float: left;
    list-style-type: none;

.div1 ul li a
    color: #FFFFFF;
    text-decoration: none;
    background-color: #333333;
    display: block;
    height: 36px;
    width: 130px;
    text-align: center;
    line-height: 36px;
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #cccccc;

.div1 ul li a:hover
    background: #666666;

    border-left-style: none !important;

    border-radius: 8px 0px 0px 8px;
    border-radius: 0px 8px 8px 0px;
Mitchell J. 24-Jan-14 20:53pm
Do mean that if you are on a page, that page's link color in the menu bar should be different to all the other links, on that page only?

1 solution

Use CSS :active Selector[^]
So, in your case, you can try like...
.div1 ul li a:active
Manish Dalwadi 24-Jan-14 23:50pm
no dr. its not ...which i want
i want that
when we click on product then we can see that current on which link we are present..
if we click on about us and we go in about us page...then we can see that in menu that we clicked on about us link
"about us" link displayed as "yellow" color
if we clicked on home then "home" link displayed as yellow color .
i give a one link for demo please see that website and its menu...and clicked two three got an idea that what i want
Ok I understand. For that you can write codes on the page load of each page. Call some JavaScript function on page load and try to assign background color to that particular menu item related to the page.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900