menu - CSS Making an Active State Nav element with existing code -

menu - CSS Making an Active State Nav element with existing code -

guys working person's code , wondering how nav in question display 'active state'. in other words, how have nav item on page active , show different bg color / text color? here css , html, it's simple, know... can't figure out how active state work.

css:

.menu {width:100%; margin:0; padding:0;} .menu a.menuitem { font-size: 10px; font-weight: bold; color: #a7a7a7; display: block; position: relative; /*to help in anchoring of ".statusicon" icon image*/ width: auto; border-bottom: 1px solid #ffffff; margin: 0; padding: 4px 10px 4px 10px; text-decoration: none; } .menu a.menuitem:visited, .menu .menuitem:active {color:#9ca1a6; text-decoration: none;} .menu a.menuitem .statusicon { /*css icon image gets dynamically added headers*/position:absolute; top:5px; right:5px; border: none;} .menu a.menuitem:hover { background: #6dd0f7; color: #fff; text-decoration: none; } .menu div.submenu { /*div contains each sub menu*/ width:auto; margin:0; padding:0;} .menu div.submenu ul { /*ul of each sub menu*/ list-style-type:none; font-size:12px; margin:0; padding:0;} .menu div.submenu ul li{border-bottom:1px solid #afafaf; line-height:12px; margin:0; padding:0;} .menu div.submenu ul li a{display:block; font-size:12px; color:#383838; text-decoration: none; margin:0; padding:5px 10px 5px 20px;} .menu div.submenu ul li a:link {color:#383838; text-decoration:none;} .menu div.submenu ul li a:visited {color:#383838; text-decoration:none;} .menu div.submenu ul li a:active {background:#d7eeff; color:#0164b5; text-decoration:none;} .menu div.submenu ul li a:hover {background:#d7eeff; color:#0164b5; text-decoration:none;} html: <div class="menu"> <a class="menuitem submenuheader" href="seller-account-store-profile.html">my store profile</a> <a class="menuitem submenuheader" href="">messages (241)</a> <a class="menuitem submenuheader" href="">account settings</a> <a class="menuitem submenuheader" href="">fees & activities</a> <a class="menuitem submenuheader" href="">notifications</a> <a class="menuitem submenuheader" href="">contact support</a> </div>

the :active css selector selects link when click (mousedown). see here.

to display navigation item of current page in way, need add together class link, , add together style definitions class. example:

<a class="menuitem submenuheader active" href="">messages (241)</a>

and style with:

.menu a.active { /* definitions */ }

css menu