TWyPGn Posted March 26, 2009 Report Share Posted March 26, 2009 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! Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 26, 2009 Report Share Posted March 26, 2009 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. Quote Link to comment Share on other sites More sharing options...
TWyPGn Posted March 27, 2009 Author Report Share Posted March 27, 2009 Still the same problem The subcurrent link doesn't change color when clicked. Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 27, 2009 Report Share Posted March 27, 2009 Clear your cache? Quote Link to comment Share on other sites More sharing options...
TWyPGn Posted March 30, 2009 Author Report Share Posted March 30, 2009 Yes, cleared the cache but still the problem persists. Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 30, 2009 Report Share Posted March 30, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 31, 2009 Report Share Posted March 31, 2009 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.) Quote Link to comment Share on other sites More sharing options...
TWyPGn Posted March 31, 2009 Author Report Share Posted March 31, 2009 Thanks Wickham. I removed the hyphens ----------------- and wow!The link is working perfectly fine. Thanks a lot! Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 1, 2009 Report Share Posted April 1, 2009 Might try using comment tokens to comment the dividers next time??? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.