Hi,

For some odd reason the active state style of the button only appears when you click on it & then vanishes quickly. I am using :http://www.dynamicdrive.com/dynamici...enu-glossy.htm

css:
Code:
<style type="text/css">

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border-bottom-width: 0;
}

.glossymenu a.menuitem{
    background-color:#464646;
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
height:20px;
color:white;
}


.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;

}

.glossymenu a.menuitem:visited
{color:green;}



.glossymenu a.menuitem:hover{
background-image: url(../template/img/glossyback2.gif);
color:white;
}
///////////////////////////////////////////////////////the active style
.glossymenu a.menuitem:active
{color:red;}
///////////////////////////////////////////////////////
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background-color:#464646;
padding-left:10px;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}



.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
text-decoration: none;
padding: 2px 0;
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
color: white;
background-image: url(../template/img/glossyback2.gif);
}





</style>
the links:
Code:
      <div class="glossymenu">
       <a class="menuitem" href="../practitioners/index.php">My Profile</a>



<a class="menuitem submenuheader" href="#" >Events</a>
<div class="submenu" >
    <ul>
    <li><a href="cpd_view.php">View Attended Events</a></li>
Any Ideas?