Navigation buttons, active button not identified...

At http://datapassion.net/ after clicking on a navigation button, it navigates to the desired page okay but it fails to keep the active button identified (lighter backgound and black font). So that user will know what page is at display.

Here is the CSS file:
html{background : rgb(244,244,244)  
    url(../images/html.png) repeat-x;
}
body{
    font-family:"Tahoma","sans-serif";
    color : #5a1c46; 
    margin:0;
    padding-top: 30px; 
     /*font-size:90%; */
	color:rgb(89,89,89);	
	background : url(../images/body.png) repeat-x; 
}
.content
{
   margin: 0 auto;
   padding-left: 0px;
   padding-bottom: 0px;
   width: 1065px;/* 866px*/
    height:1080px; /* to be removed*/
   
}

.center1{text-align:center;}



.wrapper
{
   margin: 0 auto auto 10em;
   padding-top: 35px;
   padding-left: 50px;
   padding-bottom: 35px;
   width: 880px;/* 866px*/
   /* height:1080px;  to be removed*/
   background-color:white;
  
   -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);

}
.horizontalGap
{ 
   width: 776px;/* 726*/
   border: 0px solid black;
   background-color:#eef;
   height: 10px;
}
.verticalGapTop
{
   width: 10px;
   background-color:#eef;
   height:4.7em;
   display:inline-block;
   vertical-align: top;
}
.verticalGapBottom
{
   width: 10px;
   border: 0px solid black;
   background-color:#eef;
   height:1140PX;
   display:inline-block;
   vertical-align: top;
}
.left-col, .right-col{
    display:inline-block;
	vertical-align: top;
}
.right-colBottom
{
    border: 0px solid black;
    display:inline-block;
	width:586px;/* 536px*/
	padding-left: 5px;
    border: 0px solid orange;
    display:inline-block;
}
.left-col
{
    width:180px; 
    margin-right:0;
	padding-right: .5em;
	text-align:right;
	display:inline-block;
	vertical-align: top;
}
.contact
{
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	height:4em;
	display:inline-block;
    border: 0px solid black;
}
.left-colBottom
{
    width:180px;
	padding-right: 0.5em;
	padding-top: 1.5em;
	text-align:right;
    white-space: nowrap;	
    display:inline-block;
	vertical-align: top;
}

.right-col{
    width:586px;/* 536px*/
    border: 0px solid black;
    display:inline-block;
}
.date{
    width: 60px;
	/*border: 0px solid red;
	display:inline-block
	text-align:top;;*/
	float:left;
}
.companyCity
{
    width:518px;/* 468px*/
	border: 0px solid red;
    display:inline-block;
}

.company
{
  width: 315px;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
  border: 0px solid yellow;
  display:inline-block;
  }

.city
{
  width:197px;/* 55*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.companyOther{
 width:150px;
  font-weight:bold;
  white-space: nowrap;
  border: 0px solid red;
  display:inline-block;
}
.cityOther{
  width:360px;/* 310px*/
  min-width:10em;
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
  text-align:right;
  border: 0px solid green;
  font-weight:bold;
  display:inline-block;
}
.workDescription{
    width:100%;
	min-width:10em;
	border: 0px solid blue;
    text-align:justify;
    display:inline-block;
}
.skills ,.skillsDescription{
    width:581px;/* 531px*/
	border: 0px solid blue;
    text-align:justify;
}

.experience{
    width:581px;/* 531px*/
	border: 0px solid green;
    display:inline-block;
}


.contactBlue{
  font-size:1.1em;
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock{
  text-align:center;
  height:4em;
  display:inline-block;
}
.name{
  font-size:2em;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title{
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

.blue18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
}
.black18
{
  font-size:1.4em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
}

.others
{
  color:rgb(187,74,36);
  font-size:.9em;
}
.cssLogo
{
    float:right;
     float: right;
    border: 0px solid black;
}
.note
{
    float: left;
    border: 0px solid green;
}
.footer {
    margin: 0 auto;/*40px auto auto auto; */
    padding: 10px 0px 25px 100px;

    width: 866px;/*816px */	
    text-align:left;
    font-size:.8em;
    border: 0px solid red;
}
/* ggggggggggggggggggggggggggggggg */
.btn-group-vertical
{
   width: 120px;
   float:left;
   padding-top: 10em;
   position:fixed;
   
}
.btn-group-vertical ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.btn-group-vertical li 
{ 
	/*margin: 0 0 .2em 0; */
	width:3em;
	color:red;
}

.btn-group-vertical a
{
	/*display: block;*/
	color: #FFFFFF;
	
	background-color: rgb(137, 137, 137);
	/*width: 5em;
	padding: .2em .2em;
	text-decoration: none;*/
	text-align: left;
}

/*.btn-group-vertical a:hover
{
	background-color: #336699;
	color:rgb(84,142,212);
	font-weight:bold;
}*/
.btn-group-vertical a
{
font-size: 1.25em;
}
.btn-group-vertical .current a:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical .current a, .btn-group-vertical .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
.dropdown-menu a
{
	background-color: #FFFFFF;
}

a {color:rgb(89,89,89); text-decoration: none;}      /* unvisited link */
a:visited {color:rgb(89,89,89); text-decoration: none;}   /*visited link */
a:hover {color:blue; text-decoration: none;}  /* mouse over link */
a:active {color:rgb(89,89,89);text-decoration: none;}  /* selected link */

.btn-group-vertical a {color:#FFFFFF; text-decoration: none;}      /* unvisited link */
/* .btn-group-vertical a:visited {color:#FFFFFF;}  visited link */
.btn-group-vertical a:hover {color:rgb(84,142,212); font-weight:bold;text-decoration: none;}   /*mouse over link */
.btn-group-vertical a:active {color: rgb(155, 47, 45);text-decoration: none;}   /*selected link */

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Duy PhamFreelance IT ConsultantCommented:
(lighter backgound and black font)
First I don't see any class defined as above.

Secondly, if you are talking about .btn-group-vertical .current class, then
...
.btn-group-vertical .current a:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical .current a, .btn-group-vertical .current a:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
...

Open in new window


should be changed to
...
.btn-group-vertical a.current:hover
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
/*
.btn-group-vertical a.current, .btn-group-vertical a.current:link
{
	display: block;
	color: #FFFFFF;
	background-color:#660000;
	width: 6em;
	padding: .2em .2em;
	text-decoration: none
};*/
...

Open in new window

0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
re:> I don't see any class defined as above...

I didn't mean to say "lighter background and black font" are classes, they were just example description of what I was expecting to take place.

I changed (in my desktop version)
/*.btn-group-vertical .current a:hover*/
.btn-group-vertical a.current, .btn-group-vertical a.current:link
{
	/*background-color: #123456; c000000*/
	color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}

Open in new window


but it didn't help. I am not able to have the selected button identified. There was not difference between the code I had and the one you suggested,

Mike
0
Robert SchuttSoftware EngineerCommented:
Note that some settings are commented out and some are the same as the existing style on the menu so it looks like nothing happens. I would say you need something like this:
.btn-group-vertical a.current {
	background-color: #ccc;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

Open in new window

Then, if you want a different hover  style on that 'current' menu item, use the selector suggested by Duy Pham:
.btn-group-vertical .current:hover {
	color: red; /* just to make it clear */
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.