One Navigation Link isn't working

[TWyPGn]

Hello, there are sub-navigation lists in the main list. The HTML and CSS is as follows:

 

HTML

 

Home

Personal Information

Item 3

sub-item1

sub-item2

sub-item3

Item 4

sub-item1

sub-item2

sub-item3

Item 5

sub-item1

sub-item2

Item 6

Item 7

 

CSS

 

#navcontainer {

margin: 0px;

background: #D3C196;

padding: 0 1px;

margin: 0px;

width: 250px;

}

 

ul#navlist, ul#subnavlist1, ul#subnavlist2, ul#subnavlist3 {

margin: 0;

padding: 0;

list-style-type: none;

font-family: verdana, arial, sans-serif;

}

 

/* MAIN NAVIGATION LIST */

 

ul#navlist li { margin: 0 0 1px 0; }

 

ul#navlist li a {

display: block;

margin-bottom: 5px;

margin-top: 5px;

background: #DCCEAD;

border-width: 1px;

border-style: solid;

border-color: #EBE2CF #C5AC72 #CDB887 #800000;

border-left: 12px solid #800000;

padding: 2px;

font-size: 12px;

color: black;

text-decoration: none;

font-weight: bold;

}

 

ul#navlist li a:hover {

background: #D3C196;

border-color: #C5AC72 #EBE2CF #EBE2CF #800000;

padding: 4px;

}

 

ul#navlist li a#current { border-left: 12px solid #FF9933; }

 

ul#navlist li a.drop {

background: #DCCEAD url('arrow.gif') no-repeat 95% 5%;

border-color: #EBE2CF #C5AC72 #CDB887 #800000;

padding: 2px;

}

 

ul#navlist li a.drop:active { border-color: #EBE2CF #C5AC72 #CDB887 #FF9933; }

 

/* SUB NAVIGATION LISTS */

 

ul#subnavlist1 li { display: inline; }

 

ul#subnavlist1 li a {

display: block;

margin-left: 10px;

margin-right: 10px;

padding: 2px;

background: transparent;

border-top: 0px none;

border-right:0px none;

border-left:0px none;

border-bottom: 1px dashed black;

font-size: 11px;

color: black;

text-decoration: none;

font-weight: normal;

}

 

ul#subnavlist1 li a:hover {

padding: 2px;

text-decoration: none;

border-top: 0px none;

border-right:0px none;

border-left:0px none;

border-bottom: 1px dashed black;

color: white;

}

 

----------------------------------

ul#subnavlist2 li { display: inline; }

 

ul#subnavlist2 li a {

display: block;

margin-left: 10px;

margin-right: 10px;

padding: 2px;

background: transparent;

border-top: 0px none;

border-right:0px none;

border-left:0px none;

border-bottom: 1px dashed black;

font-size: 11px;

color: black;

text-decoration: none;

font-weight: normal;

}

 

ul#subnavlist2 li a:hover {

padding: 2px;

text-decoration: none;

border-top: 0px none;

border-right:0px none;

border-left:0px none;

border-bottom: 1px dashed black;

color: white;

}

-------------------------------------

ul#subnavlist3 li { display: inline; }

 

ul#subnavlist3 li a {

display: block;

margin-left: 10px;

margin-right: 10px;

padding: 2px;

background: transparent;

border-top: 0px none;

border-right:0px none;

border-left:0px none;

border-bottom: 1px dashed black;

font-size: 11px;

color: black;

text-decoration: none;

font-weight: normal;

}

 

ul#subnavlist3 li a:hover {

padding: 2px;

text-decoration: none;

border-top: 0px none;

border-right:0px none;

border-left:0px none;

border-bottom: 1px dashed black;

color: white;

}

 

-----------------------------------

 

ul#navlist li a#subcurrent {

font-weight: bold;

color: #800000;

}

 

ul#navlist li a#subcurrent:hover { color: #ddd; }

 

Problem:

 

The sub-current link (a#subcurrent) in subnavlist1, subnavlist2 or subnavlist3 works partially: the text doesn't change its color and weight, however the 'a#subcurrent:hover' link works as it changes its color to grey.

 

I have tried using class subnavlist instead of 3 different IDs but that changes the layout. I have tried using subnavlist1, subnavlist2, subnavlist3 in the a#subcurrent link but to no avail. Could anybody please help me in getting the link work properly? I hope I have explained the problem well. Thanks!

[jlhaslip]

try this out:

   -----------------------------------

ul#navlist li a#subcurrent {
  }

ul#subnavlist1  a#subcurrent:link { 
       font-weight: bold;
       color: #f00000;
   }
ul#subnavlist1 li a#subcurrent:hover { color: #00d; }

I only listed what I changed at the end of the css.

[TWyPGn]

Still the same problem The subcurrent link doesn't change color when clicked.

[jlhaslip]

Clear your cache?

[TWyPGn]

Yes, cleared the cache but still the problem persists.

[jlhaslip]

I think you would need to add a rule for the :active and :focus pseudo-states for the colour to change *on-click*.

Edited March 30, 2009 by jlhaslip

[Wickham]

If you take out these hyphens ----------------- in the CSS styles, the code does what you ask it to do, even if that is not what you want.

 

Taking subnavlist1 as an example:-

the normal link state has

ul#subnavlist1 li a {color: black;}

 

and the hover state has

ul#subnavlist1 li a:hover {color: white;}

 

which works for sub-item2 and sub-item3.

 

You have an extra id for sub-item1

sub-item1

with the styles

ul#navlist li a#subcurrent {

font-weight: bold;

color: #800000;

}

 

ul#navlist li a#subcurrent:hover { color: #ddd; }

 

which makes sub-item1 #800000 dark red and bold normally and #ddd gray bold on hover. So it all works as it should. The #subcurrent link changes color on hover but not onClick which would require javascript.

 

The ---------------------- you have in the styles stop some of the styles working. (Only the last ----------- before the #subcurrent styles seems to do this, I've no idea why.)

[TWyPGn]

Thanks Wickham. I removed the hyphens ----------------- and wow!The link is working perfectly fine. Thanks a lot!

[jlhaslip]

Might try using comment tokens to comment the dividers next time???